Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
</dependency>
</dependencies>
### 3.1.3核心配置文件
* application.properties
#端口号
server.port=8080
#数据库基本配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/ssm_db3?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=1234
#druid 连接池配置
#驱动
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#初始化连接池大小
spring.datasource.druid.initial-size=1
#最小连接数
spring.datasource.druid.min-idle=1
#最大连接数
spring.datasource.druid.max-active=20
#获取连接时候验证，会影响性能
spring.datasource.druid.test-on-borrow=true
mybatis
mybatis.type-aliases-package=com.czxy.domain.base
mybatis.mapper-locations=classpath:mappers/*.xml
#mapper
mapper.not-empty=false
mapper.identity=MYSQL
#开启驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true
mybatis.mapper-locations=classpath*:mapper/*.xml
#开启log4j打印SQL语句
logging.level.com.czxy.dao=debug
### 3.1.4启动类
package com.czxy.ssm;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StudentApplication {
public static void main(String[] args) {
SpringApplication.run(StudentApplication.class, args);
}
}
### 3.1.5封装类
package com.czxy.ssm.vo;
import java.util.HashMap;
import java.util.Map;
public class BaseResult {
//成功状态码
public static final int OK = 1;
//失败状态码
public static final int ERROR = 0;
//返回码
private Integer code;
//返回消息
private String message;
//存放数据
private T data;
//其他数据
private Map<String,Object> other = new HashMap<>();
public BaseResult() {
}
public BaseResult(Integer code, String message) {
this.code = code;
this.message = message;
}
public BaseResult(Integer code, String message, T data) {
this.code = code;
this.message = message;
this.data = data;
}
/**
* 快捷成功BaseResult对象
* @param message
* @return
*/
public static BaseResult ok(String message){
return new BaseResult(BaseResult.OK , message);
}
public static BaseResult ok(String message, Object data){
return new BaseResult(BaseResult.OK , message, data );
}
/**
* 快捷失败BaseResult对象
* @param message
* @return
*/
public static BaseResult error(String message){
return new BaseResult(BaseResult.ERROR , message);
}
/**
* 自定义数据区域
* @param key
* @param msg
* @return
*/
public BaseResult append(String key , Object msg){
other.put(key , msg);
return this;
}
public Integer getCode() {
return code;
}
public String getMessage() {
return message;
}
public T getData() {
return data;
}
public Map<String, Object> getOther() {
return other;
}
}
### 3.1.6配置类(可选)
package com.czxy.student.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.*;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spi.service.contexts.SecurityContext;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
import java.util.ArrayList;
import java.util.List;
/**
-
Swagger2 配置类，
-
访问路径：swagger-ui.html
-
自动注册：
-
位置：resources/META-INF/spring.factories -
内容： -
org.springframework.boot.autoconfigure.EnableAutoConfiguration=\ -
com.czxy.config.Swagger2Configuration
*/
@Configuration
@EnableSwagger2
public class Swagger2ConfigurationV3 {
@Bean
public Docket createRestApi() {
// 1 确定文档Swagger版本
Docket docket = new Docket(DocumentationType.SWAGGER_2);
// 2 设置 api基本信息
docket.apiInfo(apiInfo());
// 3 设置自定义加载路径
docket = docket.select()
.apis(RequestHandlerSelectors.basePackage("com.czxy"))
.paths(PathSelectors.any())
.build();
//4 设置权限
docket.securitySchemes(securitySchemes());
docket.securityContexts(securityContexts());
return docket;
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("API")
.description("基于swagger接口文档")
.contact(new Contact("梁桐","http://www.javaliang.com","liangtong@itcast.cn"))
.version("1.0")
.build();
}
private List<ApiKey> securitySchemes() {
List<ApiKey> list = new ArrayList<>();
// name 为参数名 keyname是页面传值显示的 keyname， name在swagger鉴权中使用
list.add(new ApiKey("Authorization", "Authorization", "header"));
return list;
}
private List<SecurityContext> securityContexts() {
List<SecurityContext> list = new ArrayList<>();
list.add(SecurityContext.builder()
.securityReferences(defaultAuth())
.forPaths(PathSelectors.regex("^(?!auth).*$"))
.build());
return list;
}
private List<SecurityReference> defaultAuth() {
AuthorizationScope authorizationScope = new AuthorizationScope("global", "accessEverything");
AuthorizationScope[] authorizationScopes = new AuthorizationScope[1];
authorizationScopes[0] = authorizationScope;
List<SecurityReference> list = new ArrayList();
list.add(new SecurityReference("Authorization", authorizationScopes));
return list;
}
}
3.2前端环境
---------------
### 3.2.1拷贝静态资源
### 3.2.2vs打开资源
4.班级管理
======
4.1JavaBean:Classes
---------------------------
package com.czxy.ssm.domain;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
@Table(name = “tb_class”)
public class Classes {
/*
CREATE TABLE tb_class(
`c_id` VARCHAR(32) PRIMARY KEY COMMENT '班级ID',
`c_name` VARCHAR(50) COMMENT '班级名称',
`desc` VARCHAR(200) COMMENT '班级描述'
);
*/
@Id
@Column(name = "c_id")
private String cid;
@Column(name = "c_name")
private String cname;
@Column(name = "`desc`")
private String desc;
public String getCid() {
return cid;
}
public void setCid(String cid) {
this.cid = cid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
public Classes() {
}
public Classes(String cid, String cname, String desc) {
this.cid = cid;
this.cname = cname;
this.desc = desc;
}
@Override
public String toString() {
return "Classes{" +
"cid='" + cid + '\'' +
", cname='" + cname + '\'' +
", desc='" + desc + '\'' +
'}';
}
}
4.2查询所有
---------------
### 4.2.1后端
* 编写Mapper
package com.czxy.ssm.mapper;
import com.czxy.ssm.domain.Classes;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface ClassesMapper extends Mapper {
}
* 编写service
* 接口
package com.czxy.ssm.service;
import com.czxy.ssm.domain.Classes;
import java.util.List;
public interface ClassesService {
/**
* 查询所有
* @return
*/
public List<Classes> selectAll() ;
}
-实现类
package com.czxy.ssm.service.impl;
import com.czxy.ssm.domain.Classes;
import com.czxy.ssm.mapper.ClassesMapper;
import com.czxy.ssm.service.ClassesService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.List;
@Service
@Transactional
public class ClassesServiceImpl implements ClassesService {
@Resource
private ClassesMapper classesMapper;
@Override
public List<Classes> selectAll() {
List<Classes> list = classesMapper.selectAll();
return list;
}
}
* 编写Controller
package com.czxy.ssm.controller;
import com.czxy.ssm.domain.Classes;
import com.czxy.ssm.service.ClassesService;
import com.czxy.ssm.vo.BaseResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping(“/classes”)
public class ClassesController {
@Resource
private ClassesService classesService;
@GetMapping
public BaseResult<List<Classes>> list() {
// 查询所有
List<Classes> list = classesService.selectAll();
// 返回
/*
BaseResult baseResult = new BaseResult();
baseResult.setCode(1); // 0 错误， 20000 成功
baseResult.setMessage("提示信息");
baseResult.setData(list);
return baseResult;
*/
return BaseResult.ok("查询成功", list);
}
}
* 查询结果
### 4.2.2前端：axios+then
* 编写页面、发送ajax、显示数据
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<div id="app">
<table border="1">
<tr>
<td>编号</td>
<td>名称</td>
<td>描述</td>
</tr>
<tr v-for="(classes,index) in classesList">
<td>{{classes.cid}}</td>
<td>{{classes.cname}} </td>
<td>{{classes.desc}}</td>
</tr>
</table>
</div>
### 4.2.3前端：async+await
<meta charset="UTF-8">
<title>班级列表</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<div id="app">
<table border="1">
<tr>
<td>编号</td>
<td>班级名称</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr v-for="(classes,index) in classesList">
<td>{{classes.cid}}</td>
<td>{{classes.cname}}</td>
<td>{{classes.desc}}</td>
<td>
修改
删除
</td>
</tr>
</table>
</div>
4.3添加班级
---------------
### 4.3.1需求：
* 完成班级的添加
* 后端
* 获得提交的班级数据（json数据）
* 保存班级数据（controller-service）
* 根据操作结果提示：成功true-->添加成功，失败false-->添加失败
* 前端
* 绘制表单，数据绑定
* 点击添加，发送ajax完成添加
* 成功，跳转到列表页面。失败，给出提示
### 4.3.2后端
* 步骤1：编写service，完成添加
* 接口
/**
* 添加班级
* @param classes
* @return
*/
public boolean add(Classes classes);
* 实现类
@Override
public boolean add(Classes classes) {
int result = classesMapper.insert(classes);
return result == 1;
}
* 步骤2：编写controller，处理结果BaseResult
/**
* 添加班级
* @param classes
* @return
*/
@PostMapping
public BaseResult add(@RequestBody Classes classes) {
// 添加
boolean result =classesService.add(classes);
// 提示
if(result) {
// 成功
return BaseResult.ok("添加成功");
}
// 失败
return BaseResult.error("添加失败");
}
### 4.3.3前端
<meta charset="UTF-8">
<title>班级列表</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<div id="app">
<table>
<tr>
<td>编号</td>
<td>
<input type="text" v-model="classes.cid" />
</td>
</tr>
<tr>
<td>班级名称</td>
<td>
<input type="text" v-model="classes.cname" />
</td>
</tr>
<tr>
<td>班级描述</td>
<td>
<textarea cols="30" rows="10" v-model="classes.desc"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" value="添加" @click="addClasses" />
</td>
<td></td>
</tr>
</table>
</div>
4.4修改班级
---------------
### 4.4.1需求：
* 完成班级的修改
* 表单的回显：通过id查询详情
* 修改功能：通过id更新
### 4.4.2后端
* 步骤
* 编写service：selectById、update
* 接口
* 实现类
* 编写controller：selectById、update
* 编写service：selectById、update
* 接口
/**
* 通过id查询详情
* @param cid
* @return
*/
public Classes selectById(String cid);
/**
* 更新班级
* @param classes
* @return
*/
public boolean update(Classes classes);
* 实现类
@Override
public Classes selectById(String cid) {
return classesMapper.selectByPrimaryKey(cid);
}
@Override
public boolean update(Classes classes) {
int result = classesMapper.updateByPrimaryKeySelective(classes);
return result == 1;
}
* 编写controller：selectById、update
/**
* 查询详情
* @param cid
* @return
*/
@GetMapping("/{cid}")
public BaseResult<Classes> selectById(@PathVariable("cid") String cid) {
//查询
Classes classes = classesService.selectById(cid);
//返回
return BaseResult.ok("查询详情成功", classes);
}
/**
* 更新
* @param classes
* @return
*/
@PutMapping
public BaseResult update(@RequestBody Classes classes) {
try {
// 更新
boolean result = classesService.update(classes);
// 提示
if(result) {
return BaseResult.ok("更新成功");
}
return BaseResult.error("更新失败");
} catch (Exception e) {
e.printStackTrace();
return BaseResult.error(e.getMessage());
}
}
### 4.4.3前端
* 步骤：
* 列表页面点击“修改”，添加到修改页面 edit.html?cid=c001
* 页面加载成功时，通过id查询详情
* 回显：将查询结果绑定表单（添加已经完成，采用复制）
* 点击确定进行更新
* 修改list.html页面
修改
* 编写edit.html页面
<meta charset="UTF-8">
<title>班级列表</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
总结
- 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～
祝大家都有美好的未来，拿下满意的 offer。
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
