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

UserAdd.vue

<template><div><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>14td><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><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.idconst 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>战狼3td><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 documentationa>.p><h3>Installed CLI Pluginsh3><ul><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babela>li><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">routera>li>ul><h3>Essential Linksh3><ul><li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docsa>li><li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Foruma>li><li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chata>li><li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twittera>li><li><a href="https://news.vuejs.org" target="_blank" rel="noopener">Newsa>li>ul><h3>Ecosystemh3><ul><li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-routera>li><li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuexa>li><li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtoolsa>li><li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loadera>li><li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vuea>li>ul>div>
template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
script>
<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>myrouterh3>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 pageh1>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 = axiosVue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

vue.config.js

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！