文章目录
一、环境需求
jdk 1.8
mysql 5.7
node
navicat
idea
浏览器Json插件:jsonview
1.vue
官网：https://cn.vuejs.org/v2/guide/
方式 一
方式同：https://blog.csdn.net/weixin_44953928/article/details/124458528
方式 二
2.element-ul
官网：https://element.eleme.cn/#/zh-CN
- 测试是否成功
2 vue 的简单介绍
2.0 vue的快速启动设置
2.1 组件：简单介绍
组件的3部分
2.2全局布置
2.3 组件内设置和改动
style="min-height: 100vh"
//height这个标签的高度， line-height：属性用于设置多行元素的空间量，如多行文本的间距。text-align：用来设置元素中的的文本对齐方式
style="height: 60px; line-height: 60px; text-align: center"
//背景颜色
background-color="rgb(48,65,86)"
//文字颜色
text-color="#fff"
// 点击高亮
active-text-color="#ffd04b"
//鼠标手型,cursor（鼠标手型）属性
style="cursor: pointer"
//点击收缩（进行了绑定）
:collapse-transition="false"
:collapse="isCollapse"
2.3.1 style
- 问题
vh就是当前屏幕可见高度的1%，也就是说，height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
2.3.2背景颜色和文字颜色
//背景色
background-color="rgb(48,65,86)"
//文字颜色
text-color="#fff"
2.3.3 点击高亮
2.3.4 导航栏收缩
2.3.5 加图片
2.3.3 主页设置(搜索框、分页等等)
分页，表格添加
3.后端
3.1创建sprootboot
如果本地没有配置Maven，则采用pom里配置阿里云仓库，（这里我配置了本地的maven，所以这里忽略）
<repositories>
<repository>
<id>nexus-aliyun</id>
<name>nexus-aliyun</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>public</id>
<name>aliyun nexus</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
3.2 配置application.properties或者application.yaml 或者application.yml
- application.yml
#重新设置端口
server:
port: 9000
# mysql
spring:
datasource:
#MySQL配置
driverClassName: com.mysql.cj.jdbc.Driver
#serverTimezone=GMT%2b8 东八区
url: jdbc:mysql://localhost:3306/tests?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC&serverTimezone=GMT%2b8
username: root
password: 123456
3.3 navicat创建新的数据库
3.4 做测试
- 使用控制层
3.6几大类的创建（entity、mapper）
3.6.1 创建entity（实体类）
方式一
方式二（lombok：不建议使用）
@Getter //为字段创建getter方法
@Setter //为字段创建setter
@EqualsAndHashCode //实现equals()和hashCode()
@ToString //实现toString()
@Data //使用上面四个注解的特征
@Cleanup //关闭流
@Synchronized //对象上同步
@SneakyThrows //抛出异常
@NoArgsConstructor //注解在类上；为类提供一个无参的构造方法
@AllArgsConstructor //注解在类上；为类提供一个全参的构造方法
@Data //注解在类上；提供类所有属性的 getting 和 setting 方法，此外还提供了equals、canEqual、hashCode、toString 方法
@Setter //可用在类或属性上；为属性提供 setting 方法
@Getter //可用在类或属性上；为属性提供 getting 方法
3.6.2 mapper （dao）接口
3.6.3 Controller 控制层测试
3.7进一步测试（增加数据和更新）
3.7.1 mapper和controller ：只增加
- mapper
@Mapper
@RestController
public interface UserMapper {
@Select("SELECT * from sys_user")
List<User> findAll();
// @Insert("INSERT into sys_user(username,password,password,email,phone,address)VALUES(#{username},#{password},#{password},#{email},#{phone},#{address})")
// int insert(User user);
@Insert("INSERT into sys_user(username, password,nickname,email,phone,address) VALUES (#{username}, #{password}," +
" #{nickname}, #{email},#{phone}, #{address})")
int insert(User user);
}
- controller
//@RestController加在类上面的注解，使得类里面的每个方法都将json/xml返回数据加返回到前台页面中。
@RestController
//代表统一的给这个类加一个前缀
@RequestMapping("/user")
public class UserController {
@Autowired
private UserMapper userMapper;
// 新增
//@RequestBody：把前台传过来的JSON对象转换成Java对象
@PostMapping
public Integer save(@RequestBody User user){
return userMapper.insert(user);
}
//这是get请求
@GetMapping("/")
public List<User> index() {
List<User> all = userMapper.findAll();
return all;
}
}
3.7.2 使用post测试
postman下载
https://app.getpostman.com/app/download/win64
postman测试接口
3.7.3 mapper、service、controller ：（增加和更新）
mapper
@Mapper
@RestController
public interface UserMapper {
@Select("SELECT * from sys_user")
List<User> findAll();
//添加
@Insert("INSERT into sys_user(username, password,nickname,email,phone,address) VALUES (#{username}, #{password}," +
" #{nickname}, #{email},#{phone}, #{address})")
int insert(User user);
//更新
@Update("update sys_user set username =#{username},password=#{password},nickname=#{nickname}, email=#{email},phone=#{phone},address=#{address} where id=#{id}")
int update(User user);
}
service
@Service
public class UserService {
@Autowired
private UserMapper userMapper;
public int save(User user) {
if (user.getId() == null) {
// user没有id，则表示是新增
return userMapper.insert(user);
} else {
// 否则为更新
return userMapper.update(user);
}
}
}
controller
//@RestController加在类上面的注解，使得类里面的每个方法都将json/xml返回数据加返回到前台页面中。
@RestController
//代表统一的给这个类加一个前缀
@RequestMapping("/user")
public class UserController {
@Autowired
private UserMapper userMapper;
@Autowired
private UserService userService;
// 新增和更新
//@RequestBody：把前台传过来的JSON对象转换成Java对象
@PostMapping
public Integer save(@RequestBody User user){
return userService.save(user);
}
//这是get请求
@GetMapping("/")
public List<User> index() {
List<User> all = userMapper.findAll();
return all;
}
}
