Vue前端+Vue后端(postman测试)+mysql数据库

参考大神Vue连接MSSQL Server数据库 vue怎么连接mysql数据库_mob6454cc627440的技术博客_51CTO博客的博文，点赞！

1.安装Vue3 ：

• C:\Users\David>vue create shopping

  c:\vue create shopping1.选 Manually select features2.按 空格键 选  (*) Babel (*) TypeScript ( ) Progressive Web App (PWA) Support (*) Router>(*) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing3.选 3.x4.选 Use class-style component syntax? (y/N) 按y5.选 Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y6.Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y7.ESLint with error prevention only 按enter8.Lint on save 按enter9.In dedicated config files 按enter10.Save this as a preset for future projects? (y/N) 按N

          生成shopping项目。

  • 安装插件，如下：

            C:\Users\David>npm install axios flexible less-loader mysql express --save 

    "dependencies": {    "axios": "^1.6.7",    "core-js": "^3.8.3",    "express": "^4.18.2",    "flexible": "^0.1.20",    "less-loader": "^12.2.0",    "lib-flexible": "^0.3.2",    "mysql": "^2.18.1",    "vant": "^4.8.5",    "vue": "^3.2.13",    "vue-class-component": "^8.0.0-0",    "vue-property-decorator": "^9.1.2",    "vue-router": "^4.0.3",    "vuex": "^4.0.0"  },

    安装后： 

    2.Vue3前端

    • 前端接口封装

      |-- utils        |-- server.ts    |-- request.ts

      • server.ts 文件：这里面有Toast坑，下面代码 Toast ***到里面出不来了。

        //请求拦截Service.interceptors.request.use((config)=>{  //请求成功发送  Toast({    type:'loading',    message: '加载中...'  })  return config},(error)=>{  console.log(error)})

          主要的原因是vant从3版本更新到4版本。调用代码差异导致。参考了大神：vant报错 Uncaught TypeError: Toast is not a function_typeerror: util.showerrortoast is not a function-CSDN博客 博文

        所以把更改引用1： import { showToast,closeToast } from 'vant'; 2 把引用方法给成 showToast，closeToast 成功！

        如下：

        import axios from 'axios'import { showToast,closeToast } from 'vant';//创建请求实例const Service = axios.create({  timeout:5000,  baseURL: '/api',    //'http://127.0.0.1:3000',         //process.env.VUE_APP_BASE_API,  headers:{    'Content-Type':'application/json;charset:utf-8'  }})//请求拦截Service.interceptors.request.use((config)=>{  //请求成功发送  showToast({    type:'loading',    message: '加载中...'  })  return config},(error)=>{  console.log(error)})//相应拦截Service.interceptors.response.use((response)=>{  console.log(response)  closeToast();  if(response.status == 200){    return response  }else{    showToast(response.data.message || "网络出错！")    return response.data  }  },()=>{  closeToast();})//暴露实例// export default Service//暴露方法interface configType{  url:string,  data?:any /*,  headers?:any */}export const put = (config:configType)=>{  return Service({    ...config,    method:'put',    data:JSON.stringify(config.data)  })}export const post = (config:configType)=>{  return Service({    ...config,    method:'post',    data:config.data  })}export const get = (config:configType)=>{  return Service({    ...config,    method:'get',    params:config.data  })}//删除请求不能data传参export const del = (config:configType)=>{  return Service({    ...config,    method:'delete'  })}

        • request.ts 文件：

          import {get,del,put,post} from './server'export const loginApi = (data:any)=>{  /* return put({          url:"/user/query",          data        }) */  return get({          url:"/user/login",          data        })}export const registApi = (data:any)=>{  return put({          url:"/user/register",          data        })}

          • 前端login.vue文件

                                                                        登录      注册      
                    {{LoginStatus==1?"去 注册":"去 登陆"}}      
                  import {Vue,Options} from 'vue-class-component'import {loginApi,registApi} from '@/utils/request'import {Toast} from 'vant'@Options({})export default class login extends Vue{  userName = ''  password = ''  //LoginStatus码 1:表示登录 2:表示注册  LoginStatus = 1  handleChangeStatus(){    this.LoginStatus = this.LoginStatus == 1 ? 2 : 1  }  handleLogin(){    loginApi({      "username":this.userName,      "password":this.password    })    console.log('用户名:'+this.userName +' 密码:'+this.password)  }  handleRegister(){    registApi({      "userName":this.username,      "password":this.password    }).then((res)=>{      console.log('注册信息:',res)      if(res.code == 200){        Toast('注册成功！')      }    })  }}

             3.Vue3后端+postman工具测试

            • 后端目录结构

              |-- server    |-- api        |-- userApi.js        |-- goodsApi.js          |-- db.js    |-- index.js    |-- sqlMap.js

              • db.js为数据库连接配置

                //db.js为数据库连接配置// 数据库连接配置db.jsmodule.exports = {  mysql: {    host: '127.0.0.1', //mysql连接ip地址    user: 'root',    password: 'root',         //mySql用户名密码    database: 'mbg',          //mySql数据库名    port: '3306'              //mysql连接端口  }}

                • api文件夹下 userApi.js 是为与数据库的各个表连接接口，每一个子文件为一个数据库中一个表

                  //api文件夹为与数据库的各个表连接接口，每一个子文件为一个数据库中一个表//userApi.jsvar models = require('../db')var express = require('express')var router = express.Router()var mysql = require('mysql')var $sql = require('../sqlMap')// 连接数据库var conn = mysql.createConnection(models.mysql)conn.connect()var jsonWrite = function (res, ret) {  if (typeof ret === 'undefined') {    res.json({      code: '1',      msg: '操作失败'    })  } else {    res.json(ret)  }}module.exports = router

                  • sqlMap.js 是后端操作数据库的指令文件

                    //sqlMap.jsvar sqlMap = {  // 用户  admin_user: {    add: 'insert into t_user(username,password) values(?, ?)',    delete: 'delete from t_user where id = ?',    all: 'select * from t_user',    queryByName:'select * from t_user where username = ?'  },module.exports = sqlMap;

                    • index.js用来定义与监听后端服务器

                      //index.js用来定义与监听后端服务器// node 后端服务器const userApi = require('./api/userApi');const fs = require('fs');const path = require('path');const bodyParser = require('body-parser');const express = require('express');const app = express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: false}));// 后端api路由app.use('/api/user', userApi);// 监听端口app.listen(3000);console.log('success listen at port:3000......');

                      • 在server的目录下，执行:node index.js

                        PS C:\Users\David\VueProject\shoppingProject\src\server> node indexsuccess listen at port:3000......

                         代码没问题，会输出：success listen at port:3000......

                         

                         postman设置：

                        • Hearders输入参数
                        • Body输入参数

                          {  "host": "localhost",  "user": "root",  "password": "root",  "database": "mbg"}

                          • Params输入参数 
                          • 关键点是：输入链接网址是什么？

                            //index.js 下面的 /api/user

                            app.use('/api/user', userApi);

                            // 监听端口

                            app.listen(3000);

                            //userApi.js 下面的 /query

                            router.get('/login', (req, res) => {

                            //综上postman上的地址：http://localhost:3000/api/user/query?username=lucy

                            //index.js下面的 /api/userapp.use('/api/user', userApi);// 监听端口app.listen(3000);//userApi.js 下面的 /queryrouter.get('/login', (req, res) => {//综上postman上的地址：http://localhost:3000/api/user/query?username=lucy

                             

                            PS C:\Users\David\VueProject\shoppingProject\src\server> node indexsuccess listen at port:3000......{ username: 'lucy' }[  RowDataPacket {    id: 1,    username: 'lucy',    password: '123',    email: '123@126.com'  }]

                            •  遇到Vue3中用到params传值时，发现传值失败，并给出一个报错Discarded invalid param(s) "XXX" when navigating.

                              参考了大神：Vue3中路由传值使用params传值失败报错_discarded invalid param(s) "id" when navigating.-CSDN博客博文，深受启发。利用history.state解决问题

                              navBar.vue 设置

                              this.router.push({        

                                      name:'goodsList',        

                                      state:{

                                        key:this.searchValue

                                      }

                                    })

                                                                                              import {Vue,Options} from 'vue-class-component'  //安装vue-property-decorator  import {Prop,Emit} from 'vue-property-decorator'  import {useRouter,useRoute} from 'vue-router'  import {useStore} from 'vuex'  @Options({})  export default class tabBar extends Vue{    // store = useStore()    router = useRouter()    searchValue = ''    handleSearch = ():void=>{      //输入的值传给父组件,同时在父组件声明一个方法，且绑定子组件，子组件触发把数据传递给父组件      // this.searchValue      this.pSearch()            // console.log('navBar框数据',this.searchValue)          this.router.push({                name:'goodsList',                state:{          key:this.searchValue        }      })    }    @Emit()       //使用Emit触发父组件，跟父组件的名字要一致    pSearch():string{      console.log('emit数据',this.searchValue)      return this.searchValue    }  }  :deep .van-nav-bar__title{    max-width: 100%;    width: 100%;  }

                              goodsList.vue：

                              key = history.state.key as string

                              this.searchParams.goodsName = this.key

                                        
                              商品列表
                                          import {Options,Vue} from 'vue-class-component'  import { useRouter,useRoute } from 'vue-router'  import { useStore } from 'vuex';  import TabBar from '@/components/tabBar.vue';  import NavBar from '@/components/navBar.vue';  import {goodsListType} from '@/utils/interface'  import {getGoodsSearchApi} from '@/utils/request'  type paramsType = {    goodsName:string,    currentPage:number,    size:number  }  @Options({    components:{      TabBar,      NavBar    }  })  export default class goodsDes extends Vue{    searchParams:paramsType = {      goodsName:'',      currentPage:1,      size:5    }    goodsList:goodsListType[] = []    store = useStore()    route = useRoute()        key = history.state.key as string    handleSearch(val?:string):void{      // this.key = val       //判断当前页面navBar有参数，则this.searchParams.goodsName = val           val ? (this.searchParams.goodsName = val):null            // this.searchParams.goodsName = history.state.key            //搜索对应商品      getGoodsSearchApi(this.searchParams).then((res:any)=>{                console.log('2.商品数据',res)       })    }    //    public mounted(): void {      //输入navBar 路由页面传过来的key值      this.searchParams.goodsName = this.key      this.handleSearch()    }  }

                               

                              4.数据库:建立本地数据库