Vue +Spring Boot 前后端分离 的 项目 笔记
前端部分
Vue 脚手架的搭建
1.在创建目录的上一目录执行命令
命令为
再创建项目的时候会自动创建以项目名为名字的文件夹
以下是 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 |
搭建之后 运行这个项目
- 默认端口是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. 使用注解
| @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; |
| |
| |
| |
| |
| |
| |
| @Configuration |
| public class CorsConfig { |
| private CorsConfiguration buildConfig() { |
| CorsConfiguration corsConfiguration = new CorsConfiguration(); |
| |
| corsConfiguration.addAllowedOrigin("*"); |
| |
| corsConfiguration.addAllowedHeader("*"); |
| |
| corsConfiguration.addAllowedMethod("*"); |
| return corsConfiguration; |
| } |
| |
| @Bean |
| public CorsFilter corsFilter() { |
| UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); |
| source.registerCorsConfiguration("/**", buildConfig()); |
| return new CorsFilter(source); |
| } |
| } |
| |
- 代码本身是从一个人的项目中 复制出来的 在刚刚粘贴进来的时候会报错并提示 有一些类找不到于是我就把相关的类也粘贴过来了
- 所以如果遇到类似的情况可以 把 api 这个包粘贴到用到这个方法的项目中
- 但是 我既然写下这个笔记就代表 我一般会使用第一种使用注解的方法,写下这段话主要是为了防止我忘记或者某种特殊情况 不得不对使用这个用 配置类的方法来做到跨域请求的问题
在使用xml 的方式执行配置 Sql 语句
- 配置使用的时候会出现 找不到 实体 类的情况 就需要在类上加一些注解
比如:
| <?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"> |
| |
| |
| <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> |
| |
| |
| |
| |
| <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> |
| |
| <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; |
| |
| |
| |
| |
| |
| |
| |
| |
| @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; |
| |
| |
| |
| |
| |
| |
| |
| |
| @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 语句如下
| |
| |
| |
| <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 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程