一、API操作

1. 创建vsAPI项目，并创建相对应的类库（model，dal等）
2. 数据迁移  Code  First
3. 数据访问层（dal）操作

LoginDbContext db = new LoginDbContext();
        public LoginModel Login(string account,string password)
        {
            return db.Logins.FirstOrDefault(m => m.Account == account && m.Password == password);
        }
        public int Add(LoginModel loginModel)
        {
            db.Logins.Add(loginModel);
            return db.SaveChanges();
        }

　控制器操作

LoginDal dal = new LoginDal();
        [HttpPost]
        public IHttpActionResult Login(string account, string password)
        {
            var list = dal.Login(account, password);
            if(list!=null)
            {
                return Json(new { code = 1, msg = "登录成功", data = "" });
            }
            else
            {
                return Json(new { code = -1, msg = "登录失败", data = "" });
            }
        }
        [HttpPost]
        public IHttpActionResult Add(LoginModel loginModel)
        {
            return Json(dal.Add(loginModel));
        }

二、VS Code操作

1. 使用昨天的方法创建一个VS Code文件夹      
2. 打开文件夹并点击终端=》新终端
3. 在终端中  输入npm i element-ui -S  连接element，并在Index.vue中使用element布局

   <template>
     <div>
         <el-container>
     <el-aside width="200px">Aside</el-aside>
     <el-container>
       <el-header>Header</el-header>
       <el-main>
           <router-view/>
       </el-main>
     </el-container>
   </el-container>
     </div>
   </template>
   
   <script>
   export default {
       data(){
         return{
   
         }
       },
       methods:{
   
       },
       created(){
         
       }
   }
   </script>
   
   <style>
     .el-header, .el-footer {
       background-color: #B3C0D1;
       color: #333;
       text-align: center;
       line-height: 60px;
     }
     
     .el-aside {
       background-color: #D3DCE6;
       color: #333;
       text-align: center;
       line-height: 200px;
     }
     
     .el-main {
       background-color: #E9EEF3;
       color: #333;
       text-align: center;
       line-height: 160px;
     }
     
     body > .el-container {
       margin-bottom: 40px;
     }
     
     .el-container:nth-child(5) .el-aside,
     .el-container:nth-child(6) .el-aside {
       line-height: 260px;
     }
     
     .el-container:nth-child(7) .el-aside {
       line-height: 320px;
     }
   </style>
   

   　　

4. 在main.js中引用

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   import axios from 'axios'

   　　并在下方

   //挂载全局
   //prototype  系统级的vue原型链  全局使用
   Vue.prototype.$axios=axios;
   Vue.use(ElementUI);
   

   　　在index.js中配置路由

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Login from '../views/Login.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     {
       path: '/',
       name: 'Login',
       component: Login
     },
     {
       path: '/index',
       name: 'Index',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "about" */ '../views/Index.vue'),
       children:[
         {
           path:'main',
           name:'Main',
           component: () => import(/* webpackChunkName: "about" */ '../views/Main.vue')
         }
       ]
     }
   ]
   
   const router = new VueRouter({
     routes
   })
   
   export default router
   

   　　

5. 创建登录的vue文件
6. 在文件中写VUE代码即可

<template>
  <div>
      <table>
          <tr>
              <td>用户名</td>
              <td>
                  <input type="text" value="" v-model="loginData.account"/>
              </td>
          </tr>
          <tr>
              <td>密码</td>
              <td>
                  <input type="text" value="" v-model="loginData.password"/>
              </td>
          </tr>
          <tr>
              <td colspan="2">
                  <button @click="login">登录</button>
                  <button @click="zhu">注册</button>
              </td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
    data(){
      return{
          loginData:{
              account:'',
              password:''
          }
      }
    },
    methods:{
        login(){
            if(this.loginData.account=="")
            {
                alert("用户名不能为空");
                return;
            }
            if(this.loginData.password=="")
            {
                alert("密码不能为空");
                return;
            }
            this.$axios.post('http://localhost:50496/api/Login/Login?account='+this.loginData.account+'&password='+this.loginData.password+'').then(res=>{
                if(res.data.code==1)
                {
                    this.$router.push('/index/main');
                }
                else
                {
                    alert(res.data.msg);
                }
            })
        },
        zhu(){
            if(this.loginData.account=="")
            {
                alert("用户名不能为空");
                return;
            }
            if(this.loginData.password=="")
            {
                alert("密码不能为空");
                return;
            }
            this.$axios.post('http://localhost:50496/api/Login/Add',this.loginData).then(res=>{
                if(res.data>0)
                {
                    alert("注册成功");
                }
                else
                {
                    alert("注册失败");
                }
            })
        }
    },
    created(){
      
    }
}
</script>

<style>

</style>