创建Vue项目

创建Vue项目

1、导入项目

桌面创建文件夹并导入

2、创建项目

终端—>新终端
1.vue create 项目名

2.选择Manually select features自定义

3.空格选中
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support        
(*) Router
(*) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

4.设置
选择2.x
选择yes
选择In dedicated config files
选择no

3、安装axios

cd到项目目录
执行npm install axios --save

4、修改App.vue

只保留
<div>
  <router-view/>
</div>

5、修改views文件夹

添加List.vue,Add.vue,Update.vue

6、添加路由

修改router/index.js
=======================
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Add from '../views/Add.vue'
import Update from '../views/Update.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  },
  {
    path: '/add',
    name: 'Add',     
    component: Add
  },
  {
    path: '/update',
    name: 'Update',     
    component: Update
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

7、模糊查询分页列表

<template>
  <div>
      <input type="text" v-model="queryPage.name"/>
      <input type="button" value="名称搜索" @click="getPage(1)"/>

      <input type="button" value="新增" @click="toAdd()">
      <table border="1px" align="center">
          <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>密码</td>
              <td>操作</td>               
          </tr>

          <tr v-for="(user,index) in page.list" :key="index">
              <td>{{user.id}}</td>
              <td>{{user.name}}</td>
              <td>{{user.pwd}}</td>
              <td><a href="javascript:void(0)" @click="toUpdate(user.id)">修改</a></td>
          </tr>

          <tr>
              <td colspan="3">
                <a href="javascript:void(0)" @click="getPage(1)">首页</a>
                <a href="javascript:void(0)" @click="getPage(page.prePage)">上一页</a>
                <a href="javascript:void(0)" @click="getPage(page.nextPage)">下一页</a>
                <a href="javascript:void(0)" @click="getPage(page.pages)">末页</a>
              </td>
          </tr>
      </table>      
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: '',
  data() {
    return {
        page:{},
        queryPage:{
            pageNo:1,
            name:''
        }
    };
  },
  computed:{
  },
  watch:{
  },
  mounted () {
    this.getPage(1);  
  },
  methods: {
    getPage(pageNo){
        this.queryPage.pageNo = pageNo;
        //console.log(this.queryPage.name);
        axios.get("http://localhost:8092/findAllByPageInfo2",{params:this.queryPage}).then(data=>{
            console.log(data);
            this.page = data.data;
        });
    },
    toUpdate(id){
      this.$router.push("/update?id="+id);
    },
    toAdd(){
      this.$router.push("/add?id="+this.queryPage.id);
    }
  },
};
</script>

<style scoped>

</style>

8、添加页面

<template>
  <div>
      <table>
          <tr><td colspan="2">添加</td></tr>
          <tr>
              <td>名称</td>
              <td><input v-model="addFrm.name"></td>
          </tr>
          <tr>
              <td>密码</td>
              <td><input v-model="addFrm.pwd"></td>
          </tr>
          <tr>
              <td colspan="2">
                  <input type="button" value="提交" @click="add()"/>
                  <input type="button" value="返回"/>
              </td>
          </tr>
      </table>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: '',
  data() {
    return {
        addFrm:{
            name:"",
            pwd:""
        }
    };
  },
  computed:{
  },
  watch:{
  },
  mounted(){
  },
  methods: {
      add(){
          axios.post("http://localhost:8092/addUser",this.addFrm).then(data=>{
            if(data.data==1){
                alert("添加成功");
                this.$router.push("/");
            }else{
                alert("添加失败");
            }
          });
      }
  },
};
</script>

<style scoped>

</style>

9、修改页面

<template>
  <div>
      <table>
          <tr><td colspan="2"><h1>修改</h1></td></tr>
          <tr><td>编号</td><td><input v-model="updateFrm.id" readonly></td></tr>
          <tr><td>名称</td><td><input v-model="updateFrm.name"></td></tr>
          <tr><td>密码</td><td><input v-model="updateFrm.pwd"></td></tr>
          <tr><td colspan="2">
              <input type="button" value="提交" @click="update()"/>
              <input type="button" value="返回"/></td></tr>
      </table>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: '',
  data() {
    return {
        updateFrm:{
            id:"",
            name:"",
            pwd:""
        }
        
    };
  },
  computed:{
  },
  watch:{
  },
  mounted () {
    var id = this.$route.query.id;
    this.getById(id);  
  },
  methods: {
      
      getById(id){
          axios.get("http://localhost:8092/findById?id="+id).then(data=>{
              console.log(data);
              this.updateFrm = data.data;
          });
      },
      update(){
          axios.post("http://localhost:8092/updateUser",this.updateFrm).then(data=>{
              if(data.data==1){
                  alert("修改成功");
                  this.$router.push("/");
              }else{
                  alert("修改失败");
              }
          });
      }
  },
};
</script>

<style scoped>

</style>

安装Vue

1、安装Vue的开发工具Vscode

2、安装Vue运行环境node-v8.17.0-x64.msi

node-v8.17.0-x64.msi

3、配置Node环境

3.1、查看当前vue的版本

node -v

3.2、配置淘宝镜像

npm config set registry http://registry.npm.taobao.org/
    (npm install -g cnpm --registry=https://registry.npm.taobao.org)

3.3、导入项目

桌面创建文件夹并导入

3.4、安装脚手架

npm install -g @vue/cli

4、在vscode扩展中安装插件

Vetur和VueHelper