vue-element项目实战之商品管理系统

gitee源码

https://gitee.com/dreamer-F/fang

项目介绍

1.该项目采用vue-cli、vue-element、vue-router、element-ui、sass、axios、vue、vuex、mock、echarts、es6、webpack、node等技术进行的商品后台系统开发。

2.该项目由登录、会员等级、会员列表、商品详情、商品列表、用户中心等页面组成。

3.该项目有登录、注册、重置、增删改查等功能。

一.准备工作

编译器

HBuilder X

vue-cli脚手架的搭建

https://blog.csdn.net/William_fang/article/details/122472625

webpack的安装与使用

https://blog.csdn.net/William_fang/article/details/122489197

Vue 2.0 的桌面端组件库

https://element.eleme.cn/#/zh-CN/component/installation

二.element-ui搭建项目

1.项目打包

vue init webpack vue-element

2.进入

cd vue-element

3.安装vue-router

npm install vue-router --save-dev

4.安装element-ui

npm i element-ui -S

5.安装sass

npm install [email protected] node-sass --save-dev

6.安装依赖

npm install

注意事项：项目需要本地导入一下。

三.登录页界面

1.安装axios框架（-s相当于-save，保存）：npm install axios -s

作用：用于异步请求，获取数据。
        
异步请求：需要一个回调函数去接受我们请求的数据。
        
好处：它可以避免回调地狱，可以在我们的请求和响应前进行一个拦截。

2.安装vuex框架：npm install vuex –save

作用：用于管理vue程序开发的状态。

3.vuex解决数据刷新后消失的方法。

在app.vue中，监听刷新的事件，调用saveState，在store下的index.js中写user。

有值就拿当前的，没值就user一个。

4.由于所有状态会集中到对象中，应用会逐渐变得复杂，这时候vuex模块化可以进行将复杂的数据分割成模块，有利于管理。（在store下多了个modules，将user.js进行模块化）

四.会员列表页面+vue-element增删改查

bug系列

①修改数据的时候，其他数据都能修改，但是日期没有变化，反而输入框发生变化。

原因分析：因为我在运用v-model的时候，编辑中的日期与userinfo进行了双向绑定，所以只监听了输入框，而日期内容没发生改变 。

解法方式：在编辑页面中，将userInfo修改成editObj即可。

②无法对数据进行编辑。（出现“Vue没有被定义”的错误）

解决方法：在script标签中，用import语句进行vue的导入。并且，用new实例化对象，将数据和方法写进Vue中，后面编辑的时候，只需要用set方法进行修改即可。（策略模式）

代码寻找方式：百度vue.js官网 → 内在 → 深入响应式原理 → 对于对象

策略模式

在某个环境下，可以使用多个方法，再通过某个方法实现目标。

例如，我去学校可以骑自行车，可以乘公交车，再选择乘公交车的方式完成上学的目标。

五.模拟mock请求

mock：它可以拦截Ajax的请求，并且在回调函数中返回接口的响应数据，模拟后台接口。

官方文档：https://github.com/nuysoft/Mock/wiki/Getting-Started

下载mock：npm install mockjs

六.功能实现原理

登录：运用es6语法和this获取用户的状态，如果能获取，就用路由推送到另一组件。

重置：用了fetchData（抓取数据）、resetFields（重置数据）方法。

注册：运用表单传参，自定义注册方法，进行逻辑判断，用alert提示用户。

---

页面跳转：通过router-link实现。

数据渲染：通过router-view实现。

会员等级的切换：通过v-model进行双向绑定。

---

查询：用v-model绑定input，在computed（计算属性）中，写tables方法，绑定表格，获取input，创建一个新数组，检查所有元素，符合条件的出现在表单中。

所用函数：filter、some、toLowerCase、indexof。

---

添加：添加的时候，表单会清空且显示对话框。

确定：用正则表达式进行数据校验，如果校验成功，就运用push方法将添加信息提交到总数据里。

---

编辑：编辑时，传入数据且弹出对话框，需要通过下标和行进行获取。运用正则表达式进行数据校验，校验成功，就能进行编辑。

---

删除：运用confrim弹出确认框。用.then的方式进行删除（splice），用.catch的方式取消删除，都会弹出消息（message）。

---

轮播图的实现：采用了element-ui的标签，设置autoplay（自动播放），设置type（card类型），设置interval（时间间隔），运用v-for语句将图片遍历出来。

---

选项卡的实现：先用v-for进行数据遍历，再用v-show，根据sel的值显示所对应的数据。

---

折线图的实现：先写一个div，确定高度，获取dom节点，引入echarts，遍历表格数据，写入图表配置项和数据。

饼图：不需要设置x坐标、y坐标。

echarts安装：

npm install echarts --save

七.总结

热部署

运行效果会根据代码的变化而变化，不需要重新启动项目。

static文件

static文件不能删除，虽然它是空文件，但是删除之后项目会启动不了。static下面有一个.gitkeep。

嵌套路由

它称为子路由，在实际应用中，有多个嵌套的组件组合而成。例如view是一个视图组件。它体现在main.vue、路由中的index.js、view中。

参数传递

路径匹配：在路径（path）后面写上/:id，进行占位。

路由匹配：router-link后面的to加上冒号，就能把属性变成对象。

组件重定向(redirect)

在路径不同组件相同的情况下配置重定向。

路由模式

不带#号的是历史模式（history），带#的是哈希模式（hash）。该项目采用history模式。

404错误页面

在router中的index.js下，采用通配符的方法实现404错误。

路由钩子函数

beforeRouterEnter: (to,from.next) =>{ next() }     

作用：在进入路由前执行。

to：去哪个组件。  from：从哪个组件过来。 

beforeRouterLeave：在路由离开前执行。

next()跟拦截器一样，它会跳到下一个路由或钩子函数。

vuex判断用户是否登录

在main.js、login.vue中判断用户是否登录。

登录时，信息不为空，跳转到main页面。登出之后，清空且跳转到登录页面。

vuex操作对象

在store下建立index.js，在main.js中引入配置。

在login.vue中，保存用户属性对象。在main.vue中，用store读取用户对象中的属性。

:class

如果在class前面加上冒号，那么里面的内容会变成对象。

图像缩放算法

image-rendering: pixelated;

设置成pixelated，图片不管是放大还是缩小，都会变得清晰。

八.目录说明

build：webpack构建的相关配置。

config：环境配置。

node_modules：项目所安装的依赖。

README_files：项目说明中的图片文件。

src：源码。
   api：请求。
   
   asset：静态资源。
   
   router：路由配置。
   
   store：存储状态。（用来存储用户数据） 
   
   view：视图。
   
   app.vue：组件入口。
   
   main.js：程序入口。

static：非组件静态资源。

.babelrc：es6语法配置。（编译成es5规范，让所有浏览器都能执行）

.editorconfig：定义代码格式。

.gitignore：git忽略文件。（占个空目录，让git更好地追踪）

.postcssrc.js：css文件。（vue-cli常用配置）

index.html：页面入口。

package.json：项目依赖。

package-lock.json：依赖版本锁定原理。（在npm install的时候会生成）

README.md：项目说明。

九.教程系列

vue-router手册网：https://www.shouce.ren/api/view/a/11753

echarts教程：https://echarts.apache.org/handbook/zh/basics/import

es6菜鸟教程：https://www.runoob.com/w3cnote/es6-tutorial.html

Axios中文说明：https://www.kancloud.cn/yunye/axios/234845

十.git系列

思路

① 下载git，并且安装。

② 注册gitee账号，创建代码仓，设置公钥。

③ 创建本地目录，并且将项目文件git到本地目录

④ 本地仓初始化，并且本地仓与远程仓建立连接，用git命令进行代码上传。

命令

1.登录账号密码，并且在gitee中设置公钥

git config --global user.name "用户名"
git config --global user.email "邮箱"

2. 测试是否连得上

ssh -T  + ssh链接

3.本地目录初始化

git init 

4.添加代码到缓存

git add . 

5.提交信息

git commit -m "提交信息" 

6.查看gitee上的代码是否出错

git pull origin master

7.把本地库的内容推送到远程仓库

git push origin master 

克隆远程仓库到本地

git clone + git中的克隆链接 

十一.常见错误

错误原因：拦截器没拦截到。