《代码实例前端》Vue-cil脚手架，二级路由，增删查改

UserAdd.vue

<template>
  <div>
     <!--div的class 为error是验证错误，ok是验证成功-->
             <div>
                <label for="userCode">用户编码：</label>
                <input type="text"  v-model="user.code" name="userCode" id="userCode" value="">
                <!-- 放置提示信息 -->
                <font color="red"></font>
            </div>
            <div>
                <label for="userName">用户名称：</label>
                <input type="text" name="userName" v-model="user.username"  id="userName" value="">
                <font color="red"></font>
            </div>
            <div>
                <label for="userAccount">账号名称：</label>
                <input type="text" name="userAccount" v-model="user.account"  id="userAccount" value="">
                <font color="red"></font>
            </div>
            <div>
                <label for="userPassword">用户密码：</label>
                <input type="password" v-model="user.password" name="userPassword" id="userPassword" value="">
                <font color="red"></font>
            </div>         
            <div >
                <input type="button" value="保存" @click="saveUser">
                <input type="button" id="back" name="back" value="返回">
            </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
            code:'',
            username:'',
            password:'',
            account:''
                   
            }
    }
  },
  methods:{
    saveUser(){
                console.log(this.user);
                const jwt=localStorage.getItem("jwt");
                this.$axios.post('api/user/addUser',this.user,{headers:{'jwt':jwt}})
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code==5000){
                        alert("没有操作权限!!!")
                    }
                    if(res.data.code==200){
                      this.$router.push({name:'userList'})
                    }
                })
            }
  }

}
</script>

<style scoped>

</style>

UserList.vue

<template>
  <div class="userlist">
    <p>姓名：<input type="text" v-model="name"/><button>查询</button><router-link to="/userAdd" tag="button">新增</router-link></p>
    <table align="center" border="1px" cellpadding="10">
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>籍贯</th>
        <th>操作</th>
        <tr v-for="u in userList" :key="u.id">
            <td>{{u.id}}</td>
            <td>{{u.username}}</td>
            <td>14</td>
            <td>{{u.gender==1?'男':'女'}}</td>
            <td>江苏</td>
            <td><router-link to="/userAdd" tag="button">新增</router-link></td>
            <td><input type="button" value="删除" @click="removeUser(u.id)"></td>
            <td><button @click="updateUser(u.id)">修改</button></td>            
        </tr>
    </table>
  </div>
</template>

<script>
export default {
    data(){
        return{
            userList:[],
            name:''
        }
    },
    methods:{
        
        queryUser(){
            let jwt=localStorage.getItem("jwt")
            this.$axios.get('api/user/queryUser?name='+this.name+"&gender=0",{headers:{'jwt':jwt}})
            .then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    this.userList=res.data.data
                }
            })
        },
        removeUser(id){
                
                const jwt=localStorage.getItem("jwt");
                this.$axios.get('api/user/removeUser?id='+id,{headers:{'jwt':jwt}})
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code==5000){
                        alert("没有操作权限!!!")
                    }
                    if(res.data.code==200){
                        this.queryUser();
                    }
                })
            },
        updateUser(id){
            //路由带参数
            //如果你想通过name跳转路由，带参，可以用params或者query
            //如果你想通过path跳转路由，只能用query方式带
             this.$router.push({name:'userUpdate',params:{"id":id}})
             //this.$router.push({path:'/userUpdate',query:{"id":id}})
        }

    },
    created(){
        this.queryUser();
    }

}
</script>

<style scoped>
.userlist{
    margin: 0 auto;
    text-align: center;
}

</style>

UserManagement.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

UserUpdate.vue

<template>
  <div>
     <!--div的class 为error是验证错误，ok是验证成功-->
          
            <div>
                <label for="userName">用户名称：</label>
                <input type="text" name="userName" v-model="user.username"  id="userName" value="">
                <font color="red"></font>
            </div>
            <div>
                <label for="userAccount">账号名称：</label>
                <input type="text" name="userAccount" v-model="user.account"  id="userAccount" value="">
                <font color="red"></font>
            </div>
            <div>
                <label for="userPassword">用户密码：</label>
                <input type="password" v-model="user.password" name="userPassword" id="userPassword" value="">
                <font color="red"></font>
            </div>         
            <div >
                <input type="button" value="保存" @click="updateUser">
                <input type="button" id="back" name="back" value="返回">
            </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
            id:'',
            username:'',
            password:'',
            account:'',
            sex:1,
            phone:''      
            }
    }
  },
  methods:{
    updateUser(){
                console.log(this.user);
                const jwt=localStorage.getItem("jwt");
                this.$axios.post('api/user/updateUser',this.user,{headers:{'jwt':jwt}})
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code==5000){
                        alert("没有操作权限!!!")
                    }
                    if(res.data.code==200){
                        this.$router.push({name:'userList'})
                    }
                })
            }
  },
  created(){
    console.log(this.$route.params.id)
        this.user.id=this.$route.params.id
        const jwt=localStorage.getItem("jwt");
        this.$axios.get('api/user/findId?id='+this.user.id,{headers:{'jwt':jwt}})
        .then(res=>{
                    console.log(res.data)
                    if(res.data.code==5000){
                        alert("没有操作权限!!!")
                    }
                    if(res.data.code==200){                       
                      this.user=res.data.data
                    }
                })
    }

}
</script>

<style scoped>

</style>

Action.vue

<template>
  <div>
    <table>
        <th>电影名</th>
        <tr>
            <td>战狼3</td>
            <td>杀破狼</td>
        </tr>
    </table>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

Comedy.vue

<template>
    <div>
      <table>
          <th>电影名</th>
          <tr>
              <td>夏洛特烦恼</td>
              <td>逐梦演艺圈</td>
          </tr>
      </table>
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style scoped>
  
  </style>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Movie.vue

<template>
  <div>
    <router-link to="/action1">动作</router-link>|
    <router-link to="/comedy1">喜剧</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

MyRouter.vue

<template>
  <div>
    <h3>myrouter</h3>

  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

const about= () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
const myrouter =()=> import('../components/MyRouter.vue')
const movie =()=> import('../components/Movie.vue')
const action =()=> import('../components/Action.vue')
const comedy =()=> import('../components/Comedy.vue')
const userIndex=()=>import('../components/user/UserManagement.vue')
const userList=()=>import('../components/user/UserList.vue')
const userAdd=()=>import('../components/user/UserAdd.vue')
const userUpdate=()=>import('../components/user/UserUpdate.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    //懒加载方式导入
    component:about
  },
  {
    path:'/path',
    name:'my',
    //懒加载
    component:myrouter
  },
  {
    path:'/movie',
    name:'movie',
    //懒加载
    component:movie,
    children:[
      //设置二级默认路由
      {path:'/',redirect:'/action1'},
      {path:'/action1',name:'action',component:action},
      {path:'/comedy1',name:'comedy',component:comedy}
    ]
  },
  {
    path:'/userIndex',name:'userIndex',component:userIndex,
    children:[
      {path:'/',redirect:'/userList'},
      {path:'/userList',name:'userList',component:userList},
      {path:'/userAdd',name:'usreAdd',component:userAdd},
      {path:'/userUpdate',name:'userUpdate',component:userUpdate},
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

HomeView.vue

<template>
  <div class="login">

  <form action="">
      <p>账号<input type="text" v-model="username"></p>
      <p>密码<input type="password" v-model="password"></p>
      <p><input type="button" value="登录" @click="loginBtn"></p>
  </form>
  
  </div>
</template>

<script>


export default {
  data(){
    return{
      username:'',
      password:''
    }
  },



 methods:{
  loginBtn(){

    let param= new URLSearchParams();
    param.append("username",this.username);
    param.append("password",this.password);

    this.$axios({
      url:'api/login',
      method:'post',
      data:param
    }).then(res=>{
      console.log(res.data);
      if(res.data.code==200){
          localStorage.setItem("jwt",res.data.data);
         //路由跳转
        //第一种通过name跳转
        //this.$router.push("userList")
        //第二种通过path跳转
        this.$router.push({path:'/userList'})
        
      }
    })


   

  }
 }
}
</script>

<style scoped>
.login{
  border: 1px solid green;
  width: 20%;
  margin: 0 auto;
  text-align: center;
  margin-top: 10%;
}
</style>

App.vue

<template>
  <div id="app">
   <nav>
    <router-link to="/movie">电影</router-link>
   </nav>
    <router-view/>
  </div>
</template>

<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
Vue.prototype.$axios = axios


Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue.config.js文章来源地址https://www.toymoban.com/news/detail-402982.html

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  transpileDependencies: true,
  devServer: {
  port: 8888,  //vue项目访问端口
    proxy: {
      "/api": { // 1
        target: 'http://127.0.0.1:8082',   // 2
        changeOrigin: true, // 3
        pathRewrite: {
          '^/api': '/' // 4
        }
      }
    }
  }
}

到了这里，关于《代码实例前端》Vue-cil脚手架，二级路由，增删查改的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！