有志者,事竟成破釜沉|

codervibe

园龄:3年11个月粉丝:1关注:3

Vue +Spring Boot 前后端分离 的 项目 笔记

Vue +Spring Boot 前后端分离 的 项目 笔记

前端部分

Vue 脚手架的搭建

1.在创建目录的上一目录执行命令
命令为

vue init webpack 项目名

再创建项目的时候会自动创建以项目名为名字的文件夹
以下是 vue 2.X 版本下 创建项目时的示例

E:\java\idea_java_maven\vue_login>vue init webpack vue_login_cli
? Target directory exists. Continue? Yes
? Project name vue_login_cli
? Project description A Vue.js project
? Author codervibe <3507557934@qq.com>
? Vue build standalone
? Install vue-router? Yes # 是否安装 路由组件 路由组件是比较重要的 所以一定要安装
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm # 使用 npm 做包管理器

搭建之后 运行这个项目

  • 执行命令:
npm start
  • 默认端口是8080 ,如果这个端口被占用则会自动顺延,即80801 端口启动
  • 一般是先开启后端服务然后再开启前端服务,但是部署的时候是要进行打包的

在脚手架中使用 axios

1.安装 axios

npm install axios --save-dev

2.配置 main.js 中引入axios

import axios from 'axios';
Vue.prototype.$http = axios;

3.使用axios

  • 在需要发送异步请求的位置:
this.$http.get("Url").then((res)=>{
});
this.$http.post("Url").then((res)=>{
});

打包前端的部分

  • 可以在package.json 文件中选择 "build": "node build/build.js" 前的倒三角来进行编译
npm run build 或者 npm run-script build
  • 在编译之后项目目录下就会出现一个 dist 的目录,这个目录里面就是 编译好的项目
  • 但是这个目录是不能 直接在浏览器里面运行 的而是要放到服务容器内 进行访问才可以看到内容
  • 这里使用 Nginx 作为前端 容器
  • 当前目录下的 nginx-1.8.0 就是 Nginx 服务器

后端部分

一个好用的接口网站

  • 网址:链接
  • 主页
    图片
  • 注册就行了
  • 里面有示例模块和示例接口
    图片

Vue 解决跨域问题

  • 解决跨域问题有两个方法(主要是在后端来解决,前端方法自行百度)
  • 在这里主要使用springboot 做后端主要框架

1. 使用注解

  • 在controller 类上添加
@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {
Logger logger = LoggerFactory.getLogger(Logger.class);
@Autowired
private UserService userService;
@PostMapping("findAll")
public Map<String, Object> findAll(Integer page, Integer rows) {
Map<String, Object> map = new HashMap<>();
List<User> results = userService.findAll();
map.put("total", 10);
map.put("totalpage", 1);
map.put("page", page);
map.put("results", results);
logger.debug("map = " + map);
return map;
}
}

2. 第二个方法就是在项目中创建一个 config 包 并创建一个config 类

  • CorsConfig.java
  • 代码来自 项目 vue_usersmanagement
package com.codervine.vue_usersmanagement.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @author Administrator
* 配置允许前端跨域访问
*/
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 1
corsConfiguration.addAllowedOrigin("*");
// 2
corsConfiguration.addAllowedHeader("*");
// 3
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}
  • 代码本身是从一个人的项目中 复制出来的 在刚刚粘贴进来的时候会报错并提示 有一些类找不到于是我就把相关的类也粘贴过来了
  • 所以如果遇到类似的情况可以 把 api 这个包粘贴到用到这个方法的项目中
  • 但是 我既然写下这个笔记就代表 我一般会使用第一种使用注解的方法,写下这段话主要是为了防止我忘记或者某种特殊情况 不得不对使用这个用 配置类的方法来做到跨域请求的问题

在使用xml 的方式执行配置 Sql 语句

  1. 配置使用的时候会出现 找不到 实体 类的情况 就需要在类上加一些注解
    比如:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.codervibe.vue_subscriber_management_system.mapper.UserDao">
<!-- 此时下方所有语句中的 User (实体类) 都会 找不到除了把全包名写在相应的位置-->
<!-- 添加用户-->
<insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">
insert into t_user values (#{id},#{name},#{age},#{bir})
</insert>
<!--更新用户信息-->
<update id="update" parameterType="User">
update t_user
set name = #{name}, age = #{age}, bir = #{bir}
where id = #{id};
</update>
<!--查询全部信息-->
<select id="findAll" resultType="User">
select id,name,age,bir from t_user
</select>
<!--删除用户信息-->
<!--在删除之后把前面的每一个id 全部减一 -->
<!-- 执行多个SQL 时 每个 sql 语句之间 用 分号 隔开即可 -->
<delete id="delete" parameterType="string">
delete from t_user where id = #{id};
update t_user set id = id-1 where id > #{id};
alter table t_user auto_increment = 1;
</delete>
<!--将传递过来的id 查询数据库 并将数据传递给前端作为修改表单的默认值-->
<select id="findById" parameterType="string" resultType="User">
select * from t_user where id = #{id};
</select>
</mapper>

2.此时应该在 实体类上添加 一些 注解

  • 实体类代码示例

  • 代码如下:

package com.codervibe.vue_subscriber_management_system.model;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.Accessors;
import java.util.Date;
/**
* Created by Administrator on 2022/2/25 0025
* DateTime:2022/02/25 14:14
* Description:
* Others:
* @author Administrator
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
@Accessors(chain = true)
public class User {
private String id;
private String name;
private int age;
private Date bir;
}

3.并且在 application.yml 文件中添加一些配置

mybatis:
mapper-locations: classpath:mapper/*.xml
# 配置 实体类所在的 包
type-aliases-package: com.codervibe.vue_subscriber_management_system.model

数据库中的 TIMESTAMP 类型 进行存储

  • 在 类 中的 的 日期类型 对应 数据库中的 TIMESTAMP 类型 但是在手动输入的时候往往没有办法的存储进数据库
  • 所以要对应实体类中的库进行格式化 使用 JsonFormat 注解
  • 实体类代码示例
package com.codervibe.vue_subscriber_management_system.model;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.Accessors;
import java.util.Date;
/**
* @author Administrator
* Created by Administrator on 2022/2/25 0025
* DateTime:2022/02/25 14:14
* Description:
* Others:
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
@Accessors(chain = true)
public class User {
private String id;
private String name;
private int age;
//格式化的注解
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GTM+8")
private Date bir;
}

将一个列表中的一个用户删除之后 前面的id 会变得不可控

  • 比如删除列表中的 3 整个列表会变成 1,2,4,5,6,7,8,...... 解决办法
  • 是在删除语句之后再把每个 id 更新 sql 语句如下
<!--删除用户信息-->
<!--在删除之后把前面的每一个id 全部减一 -->
<!-- 执行多个SQL 时 每个 sql 语句之间 用 分号 隔开即可 -->
<delete id="delete" parameterType="string">
delete from t_user where id = #{id};
update t_user set id = id-1 where id > #{id};
alter table t_user auto_increment = 1;
</delete>

本文作者:codervibe

本文链接:https://www.cnblogs.com/codervibe/p/17601278.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   codervibe  阅读(76)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起