Vue的基本操作

2021-08-13 21:31:30 阅读：171 来源： 互联网

标签：Vue return res fromData Hobby 基本操作 data id

Vue的基本操作

dal层和数据迁移可以按照之前的方式进行，步骤还是一样的。先创字段再迁移，然后在写dal的各种功能。

与Ajax不同的地方就是前台操作，思维方式是很像的。

在控制器里与ajax有不同的地方是：

 //添加视图
        public ActionResult AddStudent()
        {
            return View();
        }
        //添加方法
        [HttpPost]
        public ActionResult Add(Student student)
        {
            return Json(bll.Add(student), JsonRequestBehavior.DenyGet);
        }


        //显示视图
        public ActionResult ShowStudent()
        {
            return View();
        }

        [HttpGet]
        public ActionResult PageShow(string sname, int? nid, int pageindex = 1, int pagesize = 3)
        {
            var list = bll.PageShow(sname, nid, pageindex, pagesize);
            return Json(list,JsonRequestBehavior.AllowGet);
        }

需要在方法后加入 JsonRequestBehavior.AllowGet（如果是post方法需要换成JsonRequestBehavior.DenyGet）

添加-----

表单内容都需要写在div中

el:"#div的id"

下拉框创一个数组，将数据传到数组中在表单select中绑定 <select v-model="fromData.NId">中写的对应字段名称" 在 option中

<option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>

对应操作

复选框也需要创数组

将传过来的数组进行分割传入后台

显示---分页--查询--批删--批改

@{
    ViewBag.Title = "EditStudent";
}
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>EditStudent</h2>
<div id="app">
    <table class="table table-bordered">
        <tr>
            <td>学生姓名</td>
            <td>
                <input type="text" v-model="fromData.SName" value="" />
            </td>
        </tr>
        <tr>
            <td>学生班级</td>
            <td>
                <select v-model="fromData.NId">
                    <option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>学生年龄</td>
            <td>
                <input type="text" name="name" v-model="fromData.Age" value="" />
            </td>
        </tr>
        <tr>
            <td>学生性别</td>
            <td>
                <input type="radio" name="name" v-model="fromData.Sex" value="true" /> 男
                <input type="radio" name="name" v-model="fromData.Sex" value="false" /> 女
            </td>
        </tr>
        <tr>
            <td>学生爱好</td>
            <td>
                <input type="checkbox" name="name" v-model="items" value="游泳" />游泳
                <input type="checkbox" name="name" v-model="items" value="跳水" />跳水
                <input type="checkbox" name="name" v-model="items" value="冲浪" />冲浪
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" name="name" value="修改" v-on:click="editStudent" />
            </td>
        </tr>
    </table>
</div>
<script>
    var id = location.search.substring(4);  //截取ID

    let app = new Vue({
        el: "#app",  //挂载
        created: function () {  //钩子函数   类似于 jQuery中 文档就绪函数的作用
            this.getSelect();  //调用已经写好方法
            this.getById();
        },
        data() {
            return {
                //自定义对象名称
                fromData: {
                    SId:0,
                    NId: "1",
                    SName: "",
                    Sex: "1",
                    Hobby: "",
                    Age: ""
                },
                selectItems: [],
                items:[]
            }
        },
        methods: {
            //加载下拉菜单
            getSelect() {
                axios.get('/Student/GetClassList').then(res => {
                    this.selectItems =  res.data
                })
            },
            //添加数据
            editStudent() {
                this.fromData.Hobby = this.items.join(',');
                axios.post('/Student/Edit', this.fromData).then(res => {
                    if (res.data > 0) {
                        alert('修改成功');
                        location.href='/Student/ShowStudent'
                    } else {
                        alert('修改失败');
                    }
                })
            },
            //修改数据
            getById() {
                axios.get('/Student/GetById?id='+id).then(res => {
                    this.fromData.SId = id;
                    this.fromData.NId = res.data.NId;
                    this.fromData.SName = res.data.SName;
                    this.fromData.Sex = res.data.Sex;
                    this.fromData.Hobby = res.data.Hobby;
                    this.fromData.Age = res.data.Age;

                    this.items = res.data.Hobby.split(',');  //读出来的是字符串 将 字符串 传给数组
                })
            }
        },
        computed: {

        }
    })
</script>

详情---修改

标签：Vue,return,res,fromData,Hobby,基本操作,data,id
来源： https://www.cnblogs.com/Ji0409/p/15139164.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue的基本操作