前端工程化、模块化
介绍：将项目(由多个模块组成)抽离为独立模块(例如pinia状态管理工具)，利于维护，提高代码的复用性，按需加载，具有独立的作用域（防止变量污染）；在Node.js中，每个文件都被视为一个单独的模块，使用特定的导入导出进行联系（如下）；推荐使用ECMAScript模块标准。
CommonJS 模块标准
一般用于Node.js的项目环境中，作为Node.js打包JS代码的原始方式，Node.js还支持浏览器和其他JS运行时使用的ECMAScript模块标准(一般用于前端工程化项目中)
区分模块和路径：非自定义模块（fs，path，http，express等）直接写名字
自定义模块：写模块文件路径（./utils.js）
导出使用语法：module.exports = {}/变量(exports.变量 =) 导入使用语法：require(‘模块名或路径’)；
utils例子
- utils.js导出
const baseURl = ''
const getBaseURL = ()=>{}
module.exports = {
对外属性名：baseURL
// getBaseURL:getBaseURL
// 同名变量可省略书写为
getBaseURl
}
// exports === module.exports
- 使用utils的页面；路径导入
const obj = require('./utils.js')
// obj就等于module.exports导出的对象
node中使用,以router和处理函数为例
- router/user.js
const express = require('express');
// 创建路由对象
const router = express.Router();
router.post
...
module.exports = router;
- app.js
const userRouter = require('./router/user')
// app上注册路由
app.use('/api', userRouter)
node中使用，以router处理函数为例
- router_handler/user.js
// 登录的处理函数
exports.login = (req, res) => {
const userinfo = req.body
const sqlSelect = `select *from ev_users where username=?`
db.query(sqlSelect, userinfo.username, (err, results) => {
// 执行sql语句失败
if (err) return res.send({ status: 1, message: err.message })
// 语句成功，查看数组
if (results.length !== 1) return res.send({ status: 1, message: '用户名不存在' })
// TODO:判断用户输入的密码和数据库里的密码是否一致
// 数据库里的密码是通过bcrypt加密的
const compareResult = bcrypt.compareSync(userinfo.password, results[0].password)
// 密码不一样，登录失败
if (!compareResult) return res.send({ status: 1, message: '密码错误' })
// 生成token剔除密码和头像，user 中只保留了用户的 id, username, nickname, email 这四个属性的值
const user = { ...results[0], password: '', user_pic: '' }
// 生成token字符串
const tokenStr = jwt.sign(user, config.jwtSecretKey, {
expiresIn: '10h', // token 有效期为 10 个小时
// expiresIn:'15m'
})
// 前缀在前端已经给了Bearer
res.send({ status: 0, message: '登录成功', token: tokenStr })
})
}
......
- router/user.js
// 接受导出的对象
const userHandler = require('../router_handler/user');
// 登录
router.post('/login',expressJoi(reg_login_schema),userHandler.login);
ECMAScript标准
默认导出和导入
导出：
export default { } / 变量
导入：
import { 同名变量 } from '模块名或路径'
命名导出和导入
导出：
export const baseURL = ''
export const getBaseURL = () => {}
导入：
baseURL和getBaseURL是变量，值为模块内命名导出的同名变量的值
import { 同名变量 } from '模块名或路径'
import { baseURL，getBaseURL } from '模块名或路径'
以请求拦截器为例
@/utils/request.js
const baseURL = 'http://127.0.0.1:3007'
// axios实例
const instance = axios.create({
// TODO: 1.基本地址和超时时间
baseURL,
timeout: 100000
})
instance.interceptors.request.use(
(config) => {
// if (config.method === 'post') {
config.headers['Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8'
// }
// TODO: 2.请求拦截器
// 如果仓库里有token值，加在请求头上
const userStore = useUserStore()
if (userStore.token) {
config.headers.Authorization = `Bearer ${userStore.token}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
instance.interceptors.response.use(
(response) => {
// TODO: 3.响应拦截器
console.log(response)
if (response.data.status === 0) {
return response
}
ElMessage({ message: response.data.message || '服务异常', type: 'error' })
return Promise.reject(response.data)
},
(error) => {
ElMessage({ message: error.message || '服务异常', type: 'error' })
console.log(error)
if (error.response.status === 401) {
console.log(error.response)
router.push('/login')
}
return Promise.reject(error)
}
)
export default instance
export { baseURL }
// 或者使用 export const baseURL = 'http://127.0.0.1:3007'
- 使用基地址
import { baseURL } from '@/utils/request'
- 使用请求拦截器
import request from '@/utils/request'
以pinia状态仓库统一管理为例简单语法（导入+导出）
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default pinia
// import { useUserStore } from './modules/user'
// export { useUserStore }
export * from './modules/user'
// import { useCountStore } from './modules/counter'
// export { useCountStore }
export * from './modules/counter'
技巧：按需加载-命名；全部加载-默认
node项目初始化：npm init -y，会自动生成package.json
标签：const,模块化,前端,导出,js,export,模块,router From： https://blog.csdn.net/weixin_53649241/article/details/140710796注意：Node.js默认支持CommJS标准语法，如需使用，需要在运行模块所在文件夹新建package.json文件并设置{ “type”:“module” }