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
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
}
}
}
}
}