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

已于 2023-03-31 22:10:56 修改
阅读量496 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2023-03-31 21:58:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44203782/article/details/129889306
版权

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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
        }
      }
    }
  }
}
欧皇夏老板
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli构建ts项目
蔡定努
08-07 1450
1、构建项目 vue create xxx 上面的第一条，也就是 aaa 这一个选项在你第一次创建项目的时候是并不会出现的，只有你第一次创建完成项目后回提示你保存为默认配置模板，下次新建项目的时候就可以使用你选用的配置快速新建项目了，不需要再重新选择配置项目了。 第二条选项便是 vue cli 3 默认的项目模板，包含 babel 和 eslint。 第三条选项便是自主选择你项目所需的配置。 这里由于默认模板没有啥展示的必要所以我们便选择手动配置。 选择项目配置 这里我们可以选择我
vue脚手架中实现表格增删改查
HEWNCP的博客
12-13 2199
Vue脚手架中实现表格增删改查功能 之前一直想要搜一份这样的效果练练手，没办法，都不是自己想要的效果，所以自己写了份以便参考 <template> <div id="tab"> <div class="add"> <input type="text" placeholder="标题" v-model="ti...
springboot+vue-cli脚手架开发-实现用户增删改查（前端脚手架代码）
12-19
springboot+vue-cli脚手架开发-实现用户增删改查（前端脚手架代码）
springboot+vue-cli脚手架开发-实现用户增删改查
鲸鱼姐的专栏
12-19 1228
目录 一.脚手架使用 二.脚手架开发 三 后台开发 四 界面效果 五.vue-cli打包部署 一.脚手架使用 1.vue 脚手架安装axios npm install axios —save-dev 2.在main.js配置axios import axios from ‘axios’ Vue.prototype.$http=axios; //修改内部的$http为axios 3.使用axios 在需要发送异步请求的位置 this.$http.get(“url”).then((r.
《代码实例后端》Vue-cil脚手架，二级路由，增删查改
我有故人折剑去，斩尽春风不曾归
03-31 198
【代码】《代码实例后端》Vue-cil脚手架，二级路由，增删查改。
vue-cli与后台数据交互增删改查
weixin_30849591的博客
12-21 1155
1. 安装vue-resource npm install vue-resource --save 2.访问后台地址，在vue中会出现跨域的问题，以下为解决方案 　　在config下的index.js 中配置proxyTable代理设置 proxyTable: { '/api':{ target:'http://19******...
【Vue】使用vue-cli与路由的基本使用
m0_57135756的博客
04-14 215
基础-vue-cli 工具-介绍 介绍: vue-cli是一个辅助开发工具=> 代码编译 + 样式 + 语法校验 + 输出设置 + 其他 … 作用: 可以为开发者提供一个**标准的项目开发结构** 和配置 开发者不需要再关注其他 vue-cli 一个**命令行工具,最新版本也支持图形化**操作,可快速搭建大型网页应用 基础-vue-cli-安装 **说明:**vue-cli本质上是一个npm包,也需要通过npm去安装下载 npm i -g @vue/cli // 全局安装脚手架 默认安
安装vue-cli&使用vue-cli搭建项目
qq_64001795的博客
09-26 4793
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
使用Vue-cli搭建SPA项目
weixin_56069070的博客
11-06 322
前言：今天要分享的知识是使用Vue-cli搭建SPA项目 码字不易，点个赞 转载请说明！！！ 一、vue-cil脚手架 二、将index.html与组件分开 三、嵌套路由
使用NPM安装vue.js（vue-cli）详细教程
热门推荐
chongzi的博客
03-06 4万+
这篇文章借鉴此博客 文章目录安装node.js安装cnpm安装vue-cli 脚手架构建工具（必须在全局中进行安装）创建项目 安装node.js 从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了 安装完之后，我们通过打开命令行工具（win+R）记得用管理员身份打开，不然下面安装可能会出错,输入node -v命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。 npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v命令，.
vue-cli+mock增删改查
08-06
使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
11-30
1、安装vue-cli    cnpm install vue-cli -g  –执行全局安装 2、创建一个webpack的基础项目；命令：vue init webpack myproject; 　　以下是项目的目录结构及说明 　　build是webpack配置 　　build.js       // 生产环境构建代码 　　check-versions.js // 检查node&npm等版本 　　utils.js          // 构建配置公用工具 　　vue-loader.conf.js // vue加载器 　　webpack.base.conf.js // webpack基础环境
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
vue二级路由设置方法
08-28
下面小编就为大家分享一篇vue二级路由设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
第二阶段（day22）Vue增删改查
sunshine195的博客
05-20 1879
...
VUE的增删改查
SimonChen
09-11 111
可以参照下面的视频教程 https://www.bilibili.com/video/BV1EE411B7SU?p=52
vue配置二级路由
weixin_45065580的博客
12-16 733
router.js文件 const routes = [ { path: '/', name: 'index', component: () => import(/* webpackChunkName: "about" */ '../page/index.vue'), //重定向到/home页面 redirect: "/home", //引...
通过vue官方脚手架工具在vue项目引入router路由模块实现页面跳转
qq_34135615的博客
04-25 452
1 在项目中添加vue路由vue-router依赖包 可以使用 npm install vue-router , 或者 vue add router npm install vue-router 或 vue add router 进入项目目录输入命令，等待依赖导入 安装完成后会在项目中生成router文件夹和index.js文件和About.vue,Home.vue等两个测试页面文件 index.js文件介绍 main.js文件介绍 app.vue文件介绍 在项目启动模板页App.vue上
论Vue实现简易的增删改查
唐昊
06-08 353
一、技术栈 列表显示 数组: v-for / index 对象: v-for / key 列表的更新显示 删除item 替换item 二、主题实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue-demo</title> </head> <body> <div id="demo">
vue-element-admin实现增删查改
最新发布
07-28
总结起来，vue-element-admin通过定义菜单和按钮的权限元数据来实现增删查改操作，菜单权限元数据定义在前端的路由文件中，按钮权限元数据定义在数据库中。通过操作这些权限元数据，可以实现对应的增删查改功能。 ##...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值