Vue 基础

2023-12-14 13:39:15

一、创建

1、创建.net MVC

2、搭建三层    dal（数据访问层） bll（业务逻辑层） UI（显示层）

3.EF数据迁移

二、编写dal层代码

1、显示查询分页

/// <summary>
        /// 分页显示查询
        /// </summary>
        /// <param name="name"></param>
        /// <param name="cid"></param>
        /// <param name="pageindex"></param>
        /// <param name="pagesize"></param>
        /// <param name="totalcount"></param>
        /// <param name="totalpage"></param>
        /// <returns></returns>
        public PageModel<ShowModel> Show(string name,int? cid,int pageindex,int pagesize)
        {
            PageModel<ShowModel> pd = new PageModel<ShowModel>();
            var query = from a in db.Students
                        join b in db.Classs on a.CId equals b.CId
                        select new ShowModel
                        {
                            ID = a.ID,
                            Name = a.Name,
                            CId = a.CId,
                            Hobby = a.Hobby,
                            Sex = a.Sex,
                            Age = a.Age,
                            CName = b.CName
                        };
            if(!string.IsNullOrWhiteSpace(name))
            {
                query = query.Where(m => m.Name.Contains(name));
            }
            if(cid>0)
            {
                query = query.Where(m => m.CId == cid);
            }
            pd.totalcount = query.Count();
            pd.totalpage = Convert.ToInt32(Math.Ceiling(pd.totalcount / 1.0 / pagesize));
            pd.Data= query.OrderBy(m => m.ID).Skip((pageindex - 1) * pagesize).Take(pagesize).ToList();
            return pd;
        }

2、添加

public int Add<T>(T model)where T:class
        {
            try
            {
                db.Set<T>().Add(model);
                return db.SaveChanges();
            }
            catch (Exception)
            {

                throw;
            }
        }
        public void aa()
        {
            Add<StudentModel>(new StudentModel() { });
        }

3、下拉框的绑定

public List<ClassModel> Bind()
        {
            return db.Classs.ToList();
        }

4、批量删除

public int DelAll(string ids)
        {
            var id= ids.Split(‘,‘);
            foreach(var item in id)
            {
                var kk = Convert.ToInt32(item);
                var obj= db.Students.FirstOrDefault(m => m.ID == kk);
                if(obj!=null)
                {
                    db.Students.Remove(obj);
                }
            }
            return db.SaveChanges();
        }

5、批量修改状态

public int BatchChange(string ids,bool sex)
        {
            var id = ids.Split(‘,‘);
            foreach (var item in id)
            {
                var kk = Convert.ToInt32(item);
                var obj = db.Students.FirstOrDefault(m => m.ID == kk);
                if (obj != null)
                {
                    obj.Sex = sex;
                }
            }
            return db.SaveChanges();
        }

6、编辑

public StudentModel Fan(int id)
        {
            return db.Students.FirstOrDefault(m => m.ID == id);
        }

7、修改

 public int Change(StudentModel model)
        {
            db.Entry(model).State = System.Data.Entity.EntityState.Modified;
            return db.SaveChanges();
        }

三、bll层处理

StudentDal dal = new StudentDal();
        public List<ClassModel> Bind()
        {
            return dal.Bind();
        }
        public int Add(StudentModel model) 
        {
            return dal.Add(model);
        }
        public PageModel<ShowModel> Show(string name, int? cid, int pageindex, int pagesize)
        {
            return dal.Show(name, cid, pageindex, pagesize);
        }
        public int DelAll(string ids)
        {
            return dal.DelAll(ids);
        }
        public int BatchChange(string ids,bool sex)
        {
            return dal.BatchChange(ids,sex);
        }
        public StudentModel Fan(int id)
        {
            return dal.Fan(id);
        }
        public int Change(StudentModel model)
        {
            return dal.Change(model);
        }

四、UI层处理

1、创建控制器并添加视图

2、将bll层实例化并调用（方法与视图分离）

StudentBll bll = new StudentBll();
        // GET: Default
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Add()
        {
            return View();
        }
        public ActionResult Edit()
        {
            return View();
        }

        //加载下拉方法
        [HttpGet]
        public ActionResult Bind()
        {
            return Json(bll.Bind(), JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public ActionResult SubmitAdd(StudentModel model)
        {
            return Json(bll.Add(model), JsonRequestBehavior.DenyGet);
        }
        [HttpGet]
        public ActionResult Show(string name, int? cid, int pageindex=1, int pagesize=3)
        {
            var list=bll.Show(name, cid, pageindex, pagesize);
            return Json(list,JsonRequestBehavior.AllowGet);
        }
        [HttpGet]
        public ActionResult DelAll(string ids)
        {
            return Json(bll.DelAll(ids), JsonRequestBehavior.AllowGet);
        }
        [HttpGet]
        public ActionResult BatchChange(string ids, bool sex)
        {
            return Json(bll.BatchChange(ids, sex),JsonRequestBehavior.AllowGet);
        }
        [HttpGet]
        public ActionResult Fan(int id)
        {
            return Json(bll.Fan(id),JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public ActionResult Change(StudentModel model)
        {
            return Json(bll.Change(model),JsonRequestBehavior.DenyGet);
        }

五、添加视图

1、引用控件

<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>

2、页面处理

<div id="app">
    <table class="table table-bordered">
        <tr>
            <td>学生姓名：</td>
            <td>
                <input type="text" v-model="Info.Name" value="" />
            </td>
        </tr>
        <tr>
            <td>学生班级：</td>
            <td>
                <select v-model="Info.CId">
                    <option v-for="item in bind" :value="item.CId">{{item.CName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>学生年龄：</td>
            <td>
                <input type="text" v-model="Info.Age" value="" />
            </td>
        </tr>
        <tr>
            <td>学生性别：</td>
            <td>
                <input type="radio" value="true" name="sex" v-model="Info.Sex" />男
                <input type="radio" value="false" name="sex" v-model="Info.Sex" />女
            </td>
        </tr>
        <tr>
            <td>学生爱好：</td>
            <td>
                <input type="checkbox" value="游泳" v-model="Info.Hobby" />游泳
                <input type="checkbox" value="唱歌" v-model="Info.Hobby" />唱歌
                <input type="checkbox" value="跳舞" v-model="Info.Hobby" />跳舞
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="添加" class="btn btn-danger" v-on:click="add"/>
            </td>
        </tr>
    </table>
</div>

v-model  :双向绑定

v-on:click  :点击事件

v-for   :循环

data   :属性

methods  :方法

created  :钩子函数(优先运行，相当于文档就绪函数)

3、添加和绑定下拉框

<script>
    let app = new Vue({
        el: "#app",
        created: function () {
            this.Bind();
        },
        data() {
            return {
                Info: {
                    CId: ‘1‘,
                    Name: ‘‘,
                    Sex: ‘‘,
                    Hobby: [],
                    Age: ‘‘
                },
                bind: [
                    //{ "CId": "1", "CName": "1904A" },
                    //{ "CId": "2", "CName": "1905A" },
                    //{ "CId": "3", "CName": "1906A" }
                ],
                items:[]
            }
        },
        methods: {
            Bind() {
                axios.get(‘/Default/Bind‘).then(res => {
                    this.bind = res.data
                })
            },
            add() {
                this.Info.Hobby = this.items.join(‘,‘);
                axios.post(‘/Default/SubmitAdd‘, this.Info).then(res => {
                    if (res.data > 0) {
                        alert("添加成功");
                    }
                    else {
                        alert("添加失败");
                    }
                })
            }
        }
    })
</script>

六、显示视图

1、引用控件

<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>

2、页面布局

<div id="app">
    <div id="check" style="background-color:cyan">
        学生姓名:<input type="text" v-model="name" />
        学生班级:<select v-model="cid">
            <option v-for="(item,index) in sele" :value="item.CId">{{item.CName}}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" v-on:click="xian" />
        <input type="button" value="批量删除" class="btn btn-danger" v-on:click="delAll" />
        <input type="button" value="批量修改" class="btn btn-warning" v-on:click="batchChange" />
        <input type="button" value="添加" class="btn btn-warning" onclick="location.href=‘Add‘" />
    </div>

    <table class="table table-bordered">
        <tr style="background-color:aqua;color:white">
            <td><input type="checkbox" v-model="cbxAll" v-on:click="setChecked"/></td> 
            <td>学生姓名</td>
            <td>学生班级</td>
            <td>学生性别</td>
            <td>学生年龄</td>
            <td>学生爱好</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item,index) in list">
            <td><input type="checkbox" :value="item.ID" v-model="cbx"/></td>
            <td>{{item.Name}}</td>
            <td>{{item.CName}}</td>
            <td>{{item.Sex?"男":"女"}}</td>
            <td>{{item.Age}}</td>
            <td>{{item.Hobby}}</td>
            <td>
                <a href="#" v-on:click="edit(item.ID)">编辑</a>
                <a href="#">删除</a>
            </td>
        </tr>
    </table>

    <div>
        <a href="#" v-on:click="pageData(‘F‘)">首页</a>
        <a href="#" v-on:click="pageData(‘P‘)">上一页</a>
        <a href="#" v-on:click="pageData(‘N‘)">下一页</a>
        <a href="#" v-on:click="pageData(‘L‘)">尾页</a>
        <span>当前{{pageindex}}/{{totalpage}} 共{{totalcount}}条</span>
        跳转<input type="text" style="width:40px" />
        <input type="button" value="GO" />
    </div>
</div>

3、分页 显示 批量删除 批量修改状态 

<script>
    let app = new Vue({
        el: "#app",
        data() {  //属性
            return {
                list: [],//接收要显示的数据集合
                totalcount: 0,
                totalpage: 0,
                sele: [],
                name: "",
                cid: 0,
                pageindex:1,
                pagesize: 3,
                cbxAll: false,
                cbx:[]
            }
        },
        methods: {  //方法
            xian() {
                axios.get(
                    /*‘/Default/Show?name=‘ + this.name + ‘&cid=‘ + this.cid + ‘&pageindex=‘ + this.pageindex + ‘&pagesize=‘ + this.pagesize + ‘‘*/
                    ‘/Default/Show‘, {
                        params: {
                            name: this.name,
                            cid: this.cid,
                            pageindex: this.pageindex,
                            pagesize: this.pagesize
                        }
                }
                ).then(res => {
                    this.list = res.data.Data;
                    this.totalcount = res.data.totalcount;
                    this.totalpage = res.data.totalpage;
                })
            },
            getList() {
                axios.get(‘/Default/Bind‘).then(res => {
                    this.sele = res.data;
                    //在数组的第一个位置插入一条数据
                    this.sele.unshift({ "CId": "0","CName": "请选择" });
                })
            },
            pageData(o) {
                switch (o) {
                    case ‘F‘:
                        this.pageindex = 1;
                        break;
                    case ‘P‘:
                        this.pageindex = this.pageindex <= 1 ? 1 : this.pageindex - 1;
                        break;
                    case ‘N‘:
                        this.pageindex = this.pageindex >= this.totalpage ? this.totalpage : this.pageindex + 1;
                        break;
                    case ‘L‘:
                        this.pageindex = this.totalpage;
                        break;
                    default:
                }
                this.xian();
            },
            setChecked() {
                if (!this.cbxAll) {
                    for (var i = 0; i < this.list.length; i++) {
                        this.cbx.push(this.list[i].ID);
                    }
                }
                else {
                    this.cbx = [];
                }
            },
            delAll() {
                if (this.cbxAll.length == 0) {
                    alert("至少选择一条数据");
                    return;
                }
                if (confirm("确定删除吗？")) {
                    axios.get(‘/Default/DelAll?ids=‘ + this.cbx.toString()).then(res => {
                        if (res.data > 0) {
                            alert("删除成功");
                            this.xian();
                        }
                        else {
                            alert(‘删除失败‘);
                        }
                    })
                }
            },
            batchChange() {
                if (this.cbx.length == 0) {
                    alert("至少选择一条数据");
                    return;
                }
                if (confirm("确定修改吗？")) {
                    axios.get(‘/Default/BatchChange‘, { params: { ids: this.cbx.toString(), sex: false } }).then(res => {
                        if (res.data > 0) {
                            alert("修改成功");
                            this.xian();
                        }
                        else {
                            alert("修改失败");
                        }
                    })
                }
            },
            edit(id) {
                location.href = ‘/Default/Edit?id=‘ + id;
            }
        },
        created: function () {  //钩子函数（文档就绪函数）
            this.xian();
            this.getList();
        }
    })
</script>

七、编辑视图

1、引用控件

<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>

2、页面布局

<div id="app">
    <table class="table table-bordered">
        <tr>
            <td>学生姓名：</td>
            <td>
                <input type="text" v-model="Info.Name" value="" />
            </td>
        </tr>
        <tr>
            <td>学生班级：</td>
            <td>
                <select v-model="Info.CId">
                    <option v-for="item in bind" :value="item.CId">{{item.CName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>学生年龄：</td>
            <td>
                <input type="text" v-model="Info.Age" value="" />
            </td>
        </tr>
        <tr>
            <td>学生性别：</td>
            <td>
                <input type="radio" value="true" name="sex" v-model="Info.Sex" />男
                <input type="radio" value="false" name="sex" v-model="Info.Sex" />女
            </td>
        </tr>
        <tr>
            <td>学生爱好：</td>
            <td>
                <input type="checkbox" value="游泳" v-model="items" />游泳
                <input type="checkbox" value="唱歌" v-model="items" />唱歌
                <input type="checkbox" value="跳舞" v-model="items" />跳舞
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="修改" class="btn btn-danger" v-on:click="edit" />
            </td>
        </tr>
    </table>
</div>

 

3、编辑  修改

<script>
    var id = location.search.substring(4);
    //console.log(id);
    let app = new Vue({
        el: "#app",
        created: function () {
            this.Bind();
            this.fan();
        },
        data() {
            return {
                Info: {
                    ID:0,
                    CId: ‘1‘,
                    Name: ‘‘,
                    Sex: ‘‘,
                    Hobby:"",
                    Age: ‘‘
                },
                bind: [
                    //{ "CId": "1", "CName": "1904A" },
                    //{ "CId": "2", "CName": "1905A" },
                    //{ "CId": "3", "CName": "1906A" }
                ],
                items: []
            }
        },
        methods: {
            Bind() {
                axios.get(‘/Default/Bind‘).then(res => {
                    this.bind = res.data
                })
            },
            edit() {
                this.Info.Hobby = this.items.join(‘,‘);
                axios.post(‘/Default/Change‘, this.Info).then(res => {
                    if (res.data > 0) {
                        alert("修改成功");
                        location.href = ‘Index‘;
                    }
                    else {
                        alert("修改失败");
                    }
                })
            },
            fan() {
                axios.get(‘/Default/Fan?id=‘ + id).then(res => {
                    this.Info.ID = id;
                    this.Info.CId = res.data.CId;
                    this.Info.Name = res.data.Name;
                    this.Info.Sex = res.data.Sex;
                    this.Info.Hobby = res.data.Hobby;
                    this.Info.Age = res.data.Age;

                    this.items = res.data.Hobby.split(‘,‘);
                })
            }
        }
    })
</script>

 

Vue 基础

上一篇：数据可视化大屏分析软件有哪些，无需写代码就可以分析吗？


下一篇：XDroidRequest网络请求框架，新开源