832201210李佳奕作业1

832201210李佳奕 2024-10-29 22:21:53

https://github.com/lijiayi0616/-.git----此为后端

https://github.com/lijiayi0616/-1.git---此为前端

http://10.133.58.188:8081---互联网地址

psp表：

预估完成时间	前端	后端
	10h	20h

实际完成时间	前端	后端
	15h	35h

可以在登录界面输入用户名与密码，从而登录

没有用户密码则需要重新注册

此界面可以看到登录后的商城界面

可在商城界面进行中英文切换

可以在商城页面添加你想卖的商品

项目描述
本项目是一个商品的后台管理系统，具有商城的商品管理、规格参数管理。其中包含用户中心、用户登陆与注册。集成国际化语言环境，支持中英两种语言，项目采用Vue技术栈

项目技术
项目环境：Vue-Cli构建项目，集成项目环境(前同步实现，集成了Node服务器，集成XAMPP)
项目技术点：
项目网络请求集成Axios，同时对Axios进行封装，主要处理请求拦截和响应拦截及错误提示
项目UI采用ElementUI，并对ElementUI进行二次封装，主要引入包含组件：table表格、tree树形控件、form表单、dailog弹出框等
项目页面之间的管理采用Vue-Router路由管理，包含路由绕过功能、路由导航、路由传参、路由权限管理等
项目的全局状态，包含登陆代币、订单信息等采用Vuex进行管理，并跟踪数据变化
由于商品具有编辑功能，所以引入了丰富的文本编辑器(wangEditor\UEditor)
由于项目开发是前置同步，所以前期数据采用node+mock做数据模拟，并且在开发环境下采用proxy解决跨域问题

实现登陆页面：login.vue
用到的组件 el-card、el-tabs、el-form
具体功能
登陆
完成网路请求的处理
解决跨域问题
前端解决方案：proxy代理方案(开发环境的跨域解决方案)
解决cors方案npm install --save cors
注册
注册时验证
网络请求的交互
ElementUI组件：消息消息提示
实现后台服务器提供接口
节点+MySQL(XAMPP)

快速框架npm install --save express
mysql库npm install --save mysql
前排同时运行服务器
安装一个依赖项npm install -g concurrently
包.json："dev": "concurrently \"npm run serve\" \"node server/index.js\""
运行：npm run dev
节点服务器自动重启npm install -g nodemon
路由权限管理
验证用户是否登陆
用户登陆的验证
Vuex管理用户登陆状态
token用户前端发送用户名密码 -> 后台验证用户名密码是否成功(生成token) -> 返回token用户凭证 -> 前台保存是token用户凭证
安装依赖npm install --save jsonwebtoken
本地存储：localStorage
实现导航
主导航
使用到的ElementUI组件
NavMenu 导航菜单：额外配置了一个路由器（编程路由形式）
图标图标顶部导航

使用ElementUI组件
徽章标记
下拉菜单
用户名处理
解析令牌
安装依赖：npm install --save jwt-decode
用户名和token存入到vuex中和本地中（注意：转码）
通证简介：https://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
退出处理
清除本地数据和vuex的数据，返回路由登陆页面
商品管理
关于联合调试前端和后台的联合调试
字段
接口地址(后端/项目/...)
前面开发各干各的，前端在没有拿到接口之前，只做页面UI的处理
使用到的ElementUI组件
表格表格
分页功能
使用到的元素组件
分页分页
组件之间的数据交互
子级父：prop自定义事件
同级组件
eventbus（事件入口）
视图
模糊搜索功能
form表单阻止默认事件:@submit.native.prevent
监听回车按键:@keyup.enter.native="onSubmitSearch"
国际化处理
vue-i18n 参考地址： https: //kazupon.github.io/vue-i18n/zh/
安装依赖npm install vue-i18n --save
配合ElementUI进行语言环境切换
i18n的使用方案和vuex与router相似
添加功能
使用到的ElementUI组件
对话框（内嵌的对话框）
Tree树形控件（懒加载方式）

主要功能
树的懒加载
上传图片
副文本编辑器
百度副文本编辑器： https: //github.com/HaoChuan9421/vue-ueditor-wrap/tree/2.x
wangEditor： https: //www.wangeditor.com/ 代码参考地址：https://github.com/wangeditor-team/wangEdior-with-vue/blob/master/src/views/Home.vue
组件交互关系
子传父：自定义事件($emit)
eventbus：同级关系的数据传递
删除功能
使用到的ElementUI组件：
消息框弹框
留言消息提示
修改功能
预更新：修改数据的时候，不能从本地读取当前数据，因为同时使用项目的不止一个人，如果别人了，你修改的数据是被修改之前的数据，在修改时，就覆盖了别人的看到的修改。
wangEditor的bug:加载方式的bug，不用通过id引用，而是通过ref的形式

关键代码展示，附带代码注释：

INSERT INTO `project` (`id`, `title`, `image`, `sellPoint`, `price`, `cid`, `num`, `barcode`, `status`, `created`, `updated`, `descs`) VALUES
(10015, '三体-刘慈欣', '', '未来科幻', '99', '', '999', '', '', '', '', '<p>这是大刘的得意之作，连奥巴马都喜欢看！</p>'),
(10028, '梦里花落知多少', '2.jpg', '小时代！！！', '11', '10001', '11', '', '', '', '', '<p>还不错，但是要看书籍，不要看电影</p>'),
(10031, '我与地坛', '', '做一个不动声色的人', '55', '', '464', '', '', '', '', '人生尔尔，错过了，就是一辈子'),
(10032, '舞！舞！舞！', '', '村上春树经典作品', '234', '43', '34', '', '', '', '', '人不是慢慢变老的，而是一瞬间变老的'),
(10033, '岁月神偷', '', '经典书籍', '23', '', '23', '', '', '', '', '我没有精力去认识一个新的人，或者花力气去宠福新维系一段感情，跟没办法在把自己的故事讲述一遍又一遍'),
(10035, '解忧杂货店', '', '无论现在有多么的不开心，你要相信明天会比今天更好', '34', '', '12', '', '', '', '', '<p>无论现在有多么的不开心，你要相信明天会比今天更好!!!!</p>'),
(10038, '小王子', '', '写给成年人的童话故事', '20', '', '1', '', '1', '', '', '所有人都曾是小孩，虽然之后少数人记得'),
(10039, '笑场', 'mock\\upload\\1585277506405-u=2137641711,889921437&fm=26&gp=0.jpg', '李诞的作品，很有意思，集成了扯经', '55', '100002', '1000', '', '1', '', '', '<p>未曾开言，我先笑场，笑过之后，听我来诉一诉衷肠</p>'),
(10040, '万历十五年', 'mock\\upload\\1585277681739-u=2137641711,889921437&fm=26&gp=0.jpg', '人民的名义里面出现过很多次', '45', '10002', '26', '', '1', '', '', '<p>在明朝当皇帝其实没那么幸福，比其清朝来说，还是清朝的皇帝牛逼，毕竟清朝才是更加牛逼的中央集权制</p>'),
(10041, '万寿寺【王小波】', 'mock\\upload\\1591151723874-u=2534506313,1688529724&fm=26&gp=0.jpg', '很好看', '20', '100001', '99', '', '1', '', '', '<div>测试新的内容····</div>'),
(10046, '红楼梦2', 'http://localhost:3005\\1596165406662-2.jpg', '四大名著2', '99', '100001', '8', '', '1', '', '', '<div>红楼梦</div><p><br></p>'),
(10050, '佳能（Canon）', 'http://localhost:3005\\1596439420477-2.jpg', '【爆款】Vlog视频拍摄神器！轻便外观、快速连续对焦，机内防抖、边走边拍，拍Vlgo，买它！！', '3799.00', '10003', '77', '', '1', '', '', '<div></div><p>PowerShot G7 X Mark II G7X2 数码相机 Vlog相机视频拍摄  <br></p>');

-- --------------------------------------------------------

--
-- 表的结构 `user`
--

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `username` text NOT NULL,
  `password` text NOT NULL,
  `email` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- 转存表中的数据 `user`

INSERT INTO `user` (`id`, `username`, `password`, `email`) VALUES

(1, 'iwen', '123', 'iwen@iwenwiki.com'),

(11, 'itbaizhan', '123', 'itbaizhan@sxt.cn');

-- 转储表的索引

-- 表的索引 `contentinfo`

ALTER TABLE `contentinfo`

ADD PRIMARY KEY (`id`);

-- 表的索引 `params`

ALTER TABLE `params`

ADD PRIMARY KEY (`id`);

-- 表的索引 `project`