vue3+ts+element-plus
vue3+ts+element-plus 前端
node+express 后端接口
用到的库的网址
elmentui
https://element-plus.org/zh-CN/guide/i18n.html
axios
http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8
echarts
https://echarts.apache.org/handbook/zh/basics/download
https://echarts.apache.org/zh/index.html
编辑器
用到的正则表达式
let reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/; //用户名
/^(?![0-9]+$)[a-z0-9]{1,50}$/ //密码sql 语句
增数据
const sql1 = 'insert into users set ?' //插入users表里 传数据是对象
//查数据
const sql = 'select * from users where account =?' //查找数据里account
const sql = 'select * from users where id=?' //获取用户信息id *代表所有信息
const sql = "select * from users where account = ? and identity = ?";
const sql = "select * from product where product_inwarehouse_number>=0";
const sql = "select * from product where product_out_status not in ('同意')";
const sql = `select * from product where product_inwarehouse_number>= 0 ORDER BY product_create_time limit 10 offset ${number} `;
const sql = `select * from product where product_out_status = "申请出库" || product_out_status = "否决" ORDER BY product_apply_time limit 10 offset ${number} `; //ORDER BY 排序根据product_apply_time
//like配置字段前缘为****
const sql = 'select set_value from setting where set_name like "swiper%" '; //查找内容前面有swiper的内容
const sql = `select * from files where file_name like '%${file_name}%' `; //模糊查找含有file_name
//更新数据
const sql = 'update image set account = ? where onlyId = ?' //更新image表里的 account onlyId字段，传数据是数组
const sql = 'update users set name = ? where id = ?' //用来修改表里的对应字段
const sql =
"update product set product_name = ?, product_category = ?,product_unit = ?,product_inwarehouse_number = ?,product_single_price=?,product_all_price=?,product_update_time =?,in_memo=? where id = ?";
//清空整个数据表
const sql = "truncate table login_log"; //清空整个数据表login_log
const sql = "delete from files where id=?"; //通过id删除数据express使用到的所有插件中间件总结
joi //验证中间件
body-parser中间件
crypto //会生成uuid唯一标识，一般用于上传头像
bcrypt //用于加密
bcrypt.compareSync
bcrypt.hashSync
express-jwt //和token有关，设置哪些接口都需要加token验证
jsonwebtoken //jwt用于生成token
cors //跨域
nodemon //服务会自动启动express 环境配置
安装后端所需基本依赖
一、 安装node
https://nodejs.cn/download/
点击下载对应的版本
安装完后在控制台输入node - v可查看是否安装成功
二、vscode
三、安装node项目
hbuilderX直接安装/或者通过命令行npm init安装
四、安装express项目
npm install express –save
在app.js中引入express
// 引入express框架，并使用express
const express = require('express')
const app = express()为什么使用express？
express是目前最流行的基于 Node.js 平台，快速、开放、极简的 Web 开发框架
express官网
https://www.expressjs.com.cn/
五、安装nodemon
npm i -g nodemon
https://www.npmjs.com/package/nodemon
nodemon是做什么的
当文件发生更改后会自动进行重启node，而不用我们手动去操作
六、安装cors
安装cors用于跨域请求
npm install cors
在app.js中导入cors
// cors跨域
const cors = require('cors')
// 全局挂载
app.use(cors())cors地址
https://www.npmjs.com/package/cors
app.js
const express = require("express");
const app = express();
//导入cors
const cors = require('cors')
//全局挂载
app.use(cors())
//绑定和侦听
app.listen(3007, () => {
console.log("http://127.0.0.1:3007");
});
可以启动nodemon app查看效果
七 安装表单中间件
body-parser中间件，用于处理表单数据
代码工具用Soucetree
完成本地数据库配置
什么是数据库
存储数据的仓库，每一个数据库里都有一张一张的表，我们称为数据表，每一张数据表里面都有字段，还有对应的内容
一、安装小皮面板并使用
二、安装nvaicat for mysql
https://navicat.com.cn/products/navicat-for-mysql/
三、连接后端与数据库
四、根据需求设计用户数据表字段
五、 我们的用户需要设计的字段为
数据库的唯一id（自增）账号account，密码password，身份identity，所属部门department,名字name，性别sex,邮箱email，创建时间create_time，更新时间update_time，修改账号时间，状态status用于判断用户有无冻结
因为我们这个系统是后台管理系统，主要服务于企业，所以除了基本的账号密码名字性别以及联系方式还增加了部门和身份
同时为了实现冻结账号功能，增加了状态字段
一般来说，有创建时间就有更新时间，这个一种方便追踪数据变化的方法
前端为什么要了解这些？
当我们了解如何设计字段后，跟产品经理一起开会分析甲方的需求时，可以形成一个基本的需求分析思维
六、注册与登录功能
完善用户数据表
分析注册与登录功能需要考虑的逻辑
安装mysql
npm i mysql
创建路由模块和路由函数处理模块
安装joi，@escook/express-joi中间件做后台数据验证
@escook/express-joi"">https://www.npmjs.com/package/@escook/express-joi
npm install @escook/express-joi
安培brcyptjs加密中间件
安装jwt，用于生成token
npm i jsonwebtoken
npm install joi@17.4.0
安装express-jwt中间件，用于解析token
npm i express-jwt
测试接口
前端基本配置
一、新建Vue3项目
npm create vue@latest
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
二、安装Vue Router
三、安装element-plus
四、安装Sass（sass3.0后版本称scss）
npm install sass-loader -s
npm install style-loader -s
npm install sass -s
五、安装mitt
mitt是什么
因为vue3已经没有提供配套的事件总结eventbus了，需要使用第三方库来完成之前bus干的事，所以mitt就是这个库
安装mitt
第一步 安装mitt
npm install mitt
第二步 在项目的js文件中导入mitt（局部注册）
mitt.js文件
import mitt from ‘mitt’
全局注册的话即在main.js中加上以下这行代码
第三步 实例化mitt，为方便理解，我们把实例名设为bus,并对外暴露
export const bus=mitt()
第四步 在需要使用的vue文件中导入bus
import bus from ‘./mitt’
第五步 使用mitt的emit方法传值和on方法进行接收数据
//父组件
bus.emit('函数名'，需要传的值)
//子组件
bus.on('',(接收的值)=>{
逻辑操作
})六、安装axios
npm install axios
七、安装echarts
npm install echarts
八、设置服务启动的端口以及跨域、src路径快捷方式
vite 配置
配置scss
npm install sass-loader -s
npm install style-loader -s
npm install sass -s
```js
vite.config.ts
import { fileURLToPath, URL } from ‘node:url’
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
css: { //scss
preprocessorOptions: {
scss: {
javascriptEnbled: true,
additionalData: ‘@import “src/styles/variables.scss”;’ // 如果你有需要导入的样式文件，可以在这里添加
}
}
},
resolve: {
alias: {
‘@’: fileURLToPath(new URL(‘./src’, import.meta.url))
}
}
})
这是在vite.config.js
export default defineConfig({
plugins:[vue()],
pluginOptions:{
‘style-resources-loader’:{
preProcessor:’scss’,
patterns:[]
}
}
})
## 配置端口
```js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
css: {
preprocessorOptions: {
scss: {
javascriptEnbled: true,
additionalData: '@import "src/styles/variables.scss";' // 如果你有需要导入的样式文件，可以在这里添加
}
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: { //配置端口
port: 8080, //默认启动时的端口号
open: true, //自动打开默认浏览器
cors: true //允许跨域
}
})
设置src路径
vite.config.js
import { resolve } from 'path'
const pathResolve = dir => resolve(__dirname, dir)
server: {
port: 8080, //默认启动时的端口号
open: true, //自动打开默认浏览器
cors: true //允许跨域
},
//这里配置src
resolve: {
alias: {
'@': pathResolve('./src')
}
}
vite.config.ts
const pathResolve = (dir: string): any => {
return resolve(__dirname, '.', dir);
};
const alias: Record<string, string> = {
'/@': pathResolve('./src/'),
};
resolve: { alias },功能
上传头像
上传头像使用的是插件 multer
第一步打开https://www.npmjs.com/ 搜索 multer
接着在后端程序里安装
npm i multer
完成账号详情页面接口
图片上传到绑定的流程
- 第一步调用 uploadAvatar 接口上传头像
- uploadAvatar接口返回头像图片在服务端的url地址
- 前端再次调用一个接口把当前登录的账号与图片url地址绑定，并往users表中插入url地址，问题在于，如果数据表中有多个相同的url地址
我们写下面的这个逻辑的话
const sql=’update image set account =? where image_url =?’
则会出现其他用户的头像也跟着当前的账号进行绑定
所以我们需要添加一个唯一标识去代替图片与账号进行绑定
用到node.js的crypto库
const crypto=require(‘crypto’)
//创建uuid用于唯一标识
const onlyid=crypto.randomUUID()
在项目里使用其他库的icon图标
找不到合适的图标，如何使用其他的svg图标？
安装vite-plugin-svg-icons
使用[svg-icon]即可使用iconfont等svg图标库
一、安装依赖
npm i vite-plugin-svg-icons
npm i fast-glob
二、在src/assets新建svg目录
三、vite.config.js中进行配置
import {
createSvgIconsPlugin
} from 'vite-plugin-svg-icons'
// 在plugins中添加
createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]',
}),四、在main.js中导入文件
// 导入svg图标
import 'virtual:svg-icons-register'五、在components文件中创建SvgIcon.vue文件封装svg组件
<template>
<svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
iconName: {
type: String,
required: true
},
color: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 18
}
})
const symbolId = computed(() => `#icon-${props.iconName}`);
</script>
<style scoped>
.svg-icon {
fill: currentColor;
vertical-align: middle;
}
</style>六、最后在需要的文件中使用图标
<template>
<div class="bread-crumb">
<SvgIcon icon-name="location" class="bread-crumb-icon"></SvgIcon>
</div>
</template>
<script setup>
import SvgIcon from '@/components/SvgIcon.vue'
</script>
版权声明：本文由Web学习之路发布，如需转载请注明出处。