Day198，前端性能优化和内存优化

router/index.js：↓

import Vue from 'vue'

import Router from 'vue-router'

import Home from '../components/Home.vue'

import User from '../components/User.vue'

import Student from '../components/Student.vue' //引入组件

Vue.use(Router)

export default new Router({

routes: [

{path: '/',redirect:'/home'}, //默认路由

{path:'/user',component: User},

{path:'/Student',component: Student},

{path:'/home',component: Home},//注册组件

]

})

components/Home.vue

.

components/Student.vue

.

components/User.vue

.

User.vue下面的aixos，老师推荐了一个前端测试，模拟后端接口的网址

http://rap2.taobao.org/

注册-登录-创建仓库-创建接口

生成的模拟请求：

http://rap2api.taobao.org/app/mock/277648/user/findAll

用于axios发送异步请求，获取后端的数据

• 项目布局

• 效果

---

二、用户添加

---

• 创建用户添加组件UserAdd.vue

.

• 注册组件router/index.js

添加到User组件下的，成为子组件

• 创建模拟接口

http://rap2api.taobao.org/app/mock/277648/user/add

• 测试saveUserInfo()函数，是否可以接收到接口返回的值

methods: {

saveUserInfo(){

console.log(this);

//发送aixos请求

let _this= this;

this.$http.post("rap2api.taobao.org/app/mock/27…

console.log(resp);

})

}

},

• 加入切换路由功能

saveUserInfo(){

console.log(this);

//发送aixos请求

let _this= this;

this.$http.post("rap2api.taobao.org/app/mock/27…

console.log(resp);

if(resp.data.success){

_this.$router.push("/user"); //切换路由

}

})

}

发现路由确实切换了，但是没有发起findAll查询所有的axios请求

• 给user.vue组件加入监听路由

watch:{ //用来监听

$route:{

handler: function(val,oldval){ //参数1：变化之后的路径 参数2：变化之前的路径

console.log(val);

},

//深度观察监听

deep: true

}

}

• 在监听器里面调用findAll()函数，之前是没这个函数的，将User.vue的created()生命周期函数里面的方法封装成findAll()放入User.vue的methods中

• 输完数据后点添加会路由切换成/user，并再发送一个findAll查询所有数据

因为接口的是模拟的，所以数据不可能更新

---

三、用户删除

---

• 创建虚拟删除接口

访问：http://rap2api.taobao.org/app/mock/277648/user/delete?id=1

delRow(id){

console.log(id);

let _this = this;

this.$http.get("rap2api.taobao.org/app/mock/27…

console.log(resp);

if(resp.data.success){ //判断数据是否已经删除

_this.findAll() //刷新页面,查询所有

}

});

}

---

四、用户修改

---

• 创建组件 UserEdit.vue

.

• 注册组件router/index.js

• User.vue

• 效果

• 获取另一个组件中的数据

获取到id后， 就可以根据id查询用户了，

• 创建虚拟findOne接口

访问：http://rap2api.taobao.org/app/mock/277648/user/findOne

• findOne()

findOne(){

let _this = this;

this.$http.get("rap2api.taobao.org/app/mock/27…

console.log(resp.data);

_this.user=resp.data;

});

}

• 创建虚拟用户更新接口

地址：http://rap2api.taobao.org/app/mock/277648/user/edit

• UserEdit()

UserEdit(){

console.log(this);

//发送一个更新的请求

let _this = this;

this.$http.post("rap2api.taobao.org/app/mock/27…

console.log(resp);

if(resp.data.success){

_this.$router.push("/user"); //切换路由

}

});

}

user组件他有watch来监听路由的切换

• UserEdit.vue组件

.

以上使用的模拟接口来实现的，

下面在将模拟的接口转换后端的接口

---

五、后台开发

---

• 新建数据库

使用之前的bootvue数据库

CREATE TABLE vue_user(

id INT(6) PRIMARY KEY AUTO_INCREMENT,

NAME VARCHAR(40),

age INT(3),

bir datetime

)

• 引入依赖

org.springframework.boot

spring-boot-starter-web

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.1.4

com.alibaba

druid-spring-boot-starter

1.1.17

mysql

mysql-connector-java

5.1.49

org.projectlombok

lombok

true

org.springframework.boot

spring-boot-starter-test

test

• application.yaml配置文件

spring:

application:

name: vue #项目名

datasource:

password: '00000'

username: 'root'

type: com.alibaba.druid.pool.DruidDataSource #使用Druid数据连接池

driver-class-name: com.mysql.jdbc.Driver #数据库驱动

url: jdbc:mysql://localhost:3306/bootvue?characterEncoding=UTF-8&serverTimezone=GMT%2B8&useSSL=false

server:

port: 6161

servlet:

context-path: /vue #项目路径

mybatis:

mapper-locations: classpath:com.achang.mapper/*.xml #指定sql映射文件位置

type-aliases-package: com.achang.entity #指定bean对象位置

• 项目整体布局

• 根据数据库新建entity实例

@Data

@AllArgsConstructor

@NoArgsConstructor

@ToString

@Accessors(chain = true) //链式调用

public class User {

private Integer id;

private String name;

private Integer age;

@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GTM+8")

//设置日期格式，pattern格式化格式，timezone时区：我们在东八区

private Date bir;

}

• dao/UserDao

@Mapper

public interface UserDao {

//保存

void save(User user);

//更新

void update(User user);

//删除

void delete(Integer id);

//查询所有

List findAll();

//根据id，查询一个用户

User findById(Integer id);

}

• mapper/UserDaoMapper.xml

insert into vue_user

values(#{id},#{name},#{age},#{bir})

update vue_user

set name=#{name},age=#{age},bir=#{bir}

where id = #{id}

select id,name,age,bir from vue_user

delete from vue_user

where id = #{id}

select id,name,age,bir from vue_user where id = #{id}

• service/UserService接口

public interface UserService {

//保存

void save(User user);

//更新

void update(User user);

//删除

void delete(Integer id);

//查询所有

List findAll();

//根据id，查询一个用户

User findById(Integer id)

}

• impl/UserServiceImpl

@Service

@Transactional

public class UserServiceImpl implements UserService{

@Autowired

private UserDao userDao;

@Override

public void save(User user) {

userDao.save(user);

}

@Override

public void update(User user) {

userDao.update(user);

}

@Override

public void delete(Integer id) {

userDao.delete(id);

}

@Override

public List findAll() {

return userDao.findAll();

}

@Override

public User findById(Integer id) {

return userDao.findById(id);

}

}

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：docs.qq.com/doc/DSmRnRG…