前后端分离项目知识
前后端分离项目结构
1. 前端一个文件夹 wsm-web
2. 后端一个文件夹 wsm
后端都有
数据库mysql
安装maven前需要安装mysql ，mysql是用来创建关键型数据库的。
mysql官网下载
archives可以下载其他版本 一直点下一步就好了 想改位置的改位置 当然得记住自己设置的密码 默认设置是开机自启服务 如果不想，在windows serve时， 把start the mysql server at system startup 的√去掉，然后进行环境配置，方便你从任何地方用mysql( 此电脑右键 – 属性 --高级系统设置 --环境变量 ，给系统变量 paht 加MySQL的 bin目录 )
win+r 输入cmd输入mysql -uroot -p，
然后输入密码出现welcome啥的就配置好了
自动化构建工具 maven
自动化构建工具 以前创项目要下很多jar包，maven就换了种形式
maven gradle 管理项目外部依赖包，编译，打包等，主要用于java项目， gradle用的最多的是android里面的构建。
maven有一个仓库 是项目依赖的第三方库，可以通过setting.xml设置改变路径
maven官网下载 maven与jdk版本对应看看自己的jdk下载相应的maven版本
jdk环境配好了就win+r cmd 输入java -version。
bin.tar.gz结尾的是linux平台下载，文件 zip是windows的，环境配置和上面mysql一样在path里加入maven的bin目录地址 。
win+r cmd 输入mvn -version 出现版本信息说明配置好了
本地仓库可以更改一些设置 maven仓库下载是外网的默认下载一般慢，这是就要使用我们国内的镜像啦，如何配置，请看
maven中的本地仓库配置
找到刚刚下载的maven目录下的confi下的setting.xml文件
自己添加个空文件用来放下载的依赖包
<localRepository>地址</localRepository>
接着添加国内的镜像库
<mirrors>
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
</mirrors>
按jdk下载的maven这里你就不用看了。
然后jdk看情况默认的是啥 maven与jdk版本对应
我的是3.6.2，默认是jdk1.8，所以我下载的也是jdk1.8，我就不需要再下载配置了。
如果你用的不是就得声明了
set JAVA_HOME = 地址
当然版本跨越不能太大，还是用它要求的更好。
前端和后端传递数据
axios
axios官网 需要nodejs，依赖于原生的es6 promise。
在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests，可拦截请求，自动转换json数据。
npm 安装
npm install --save axios 安装这篇文章已说过如何更改安装地址。
typescript引入axios
TypeScript 提供了 JavaScript 的所有功能，以及TypeScript 的类型系统，例如你let一个变量等于一个字符串，你就不需要声明这个变量为什么类型了，Visual Studio Code 在底层使用 的是TypeScript 来简化。
单组件引用
import axios from 'axios';
axios.get('/user?ID=12345');
当然你也可以写在main.js中，进行全局引用。
import { createApp } from 'vue'
const app = createApp(App)
app.config.globalProperties.$axios=axios
app.config.globalProperties.$httpUrl="http://localhost:8090"
app.mount('#app')
基础网络请求get
this.$axios
.get(this.$httpUrl + '/user/del?id=' + id)
.then((res) => console.log(res.data}))
用请求方式别名更精简
this.axios.get(url).then(res=>{
console.log(res.data})
post
this.$axios({
method: 'post',
url: this.$httpUrl + '/user/listPageF',
data: {
pageSize: this.pageSize,
param: {
name: this.name
},
}
}).then((res) =>{ console.log(res.data})})
用请求方式别名更精简
this.axios.post(url,{pageSize: this.pageSize,param: {name: this.name}})
.then(res=>{
console.log(res.data})
axios是如何和后端联系起来的呢，当然是写在后端里的注释。
controller里面的
@RestController，
@RequestMapping(“/user”)，
@PostMapping(“/login”)这种类型的注释。
this.$axios
.post(this.$httpUrl + '/user/login', this.loginForm)
.then((res) => res.data)
.then((res) => {
if (res.code == 200) {
sessionStorage.setItem('User', JSON.stringify(res.data.user));
this.$store.dispatch('updateMenu', res.data.menu);
this.$router.replace('/Index');
} else {
this.confirm_disabled = false;
alert('用户名或密码错误！');
return false;
}
});
后端与数据库的关联
yml文件或properties文件,数据库的配置和各种模板配置。
server:
port: 8090
spring:
datasource:
#前面的属性配置基本都有 url可以看出是mysql数据库
url: jdbc:mysql://localhost:3306/wsm?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8
#这是mysql8以上的driver名字写法，以下是com.mysql.jdbc.Driver
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
password: root
mybatis-plus:
mapper-locations: classpath:/mapper/*.xml
#配置日志 开启控制台SQL日志打印
configuration.log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
files:
upload:
#文件下载地址配置
path: D:/Desktop/springbootvuewsm-master/files/
mybatis-plus
不需要自己在xml里面写sql语句可以使用已经封装好的方法，用
LambdaQueryWrapper类接条件，eq，like决定等号或模糊条件，一个条件可以lambdaQuery().eq(User::getAccount, account).list()获取对象 User::getAccount遍历查询account属性与变量account对比。
后端
后端用的java，得有jdk，数据库mysql
springmvc，spring，springboot都是框架，spring包含了springmvc，Spring Boot 是对 Spring 的增强，它继承了 Spring 的核心特性，同时提供了更快速的开发体验和更简化的部署过程。springboot在创建和部署方面更优。Thymeleaf能够快速整合入Springboot，使用方便快捷，thymeleaf相当于springmvc中的view，它有动静分离，开箱即用的特点。
想要看静态的就自己打开html运行，动态的就要运行TestApplication.java了，然后浏览器输入 localhost:8080/Index
其它的可以看这里哦 thymeleaf3.0
vscode创建springboot项目
下载扩展spring initalizr java support
点击文件，新建文件，选择最后一个创建java项目。
选中项目类型 springboot，然后选择mavenproject，选择springboot版本，选择java语言。
最后就是项目的com.exmaple包名，然后项目名，打包方式jar，jdk版本，依赖选择。
依赖选择可以选一些常用的依赖。lombok spring web
创建完了，会有一个properties文件这是用来属性设置的，默认的，咱么可以改成yml，yml是对properties的升级。
所以咱们把properties改成yml吧。
server:
port: 8090
spring:
datasource:
#前面的属性配置基本都有 url可以看出是mysql数据库
url: jdbc:mysql://localhost:3306/wsm?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8
#这是mysql8以上的driver名字写法，以下是com.mysql.jdbc.Driver
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
password: root
mybatis-plus:
mapper-locations: classpath:/mapper/*.xml
#配置日志 开启控制台SQL日志打印
configuration.log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
files:
upload:
#文件下载地址配置
path: D:/Desktop/springbootvuewsm-master/files/
properties和yml的区别
properties用来设置属性的，yml是另一种标记语言；properties写法是key=value这种类型，如
server.port = 8080
yml是key：value这种，value前必须有空格，如
server:
port: 8090
很显然yml更加简洁，也清晰明了；yml可以配置多种类型如对象student: {id: 1,name: Java,age: 18}，数组animal: [Dog, Cat]，还有另外一种书写方式
student:
id: 1
name: Java
age: 18
animal:
- Dog
- Cat
还能跨语言，而yml只适合java语言。
springboot有很多实用的注释
- 核心注释
@SpringBootApplication: 放在启动类前，要springboot自动配置好，它可以分为@SpringBootConfiguration、@EnableAutoConfiguration 和 @ComponentScan
@EnableAutoConfiguration: 启用自动配置功能，实用 exclude 属性把不要的配置不要加载
@ComponentScan: 扫描到改配置放到程序中
- 依赖注入注释
@Autowired: 自动导入依赖的 bean，默认按类型注入
@Resource: 默认按名称注入，可以通过 name 和 type 属性指定
@Inject: 等价于默认的 @Autowired，只是没有 required 属性 - 业务层注释
@Controller: 用于定义控制器类，负责将用户请求转发到对应的服务接口
@RestController: 标注控制层组件，是 @ResponseBody 和 @Controller 的合集
@Service: 用于修饰 service 层的组件
@Repository: 用于标注数据访问组件，即 DAO 组件
@Mapper:写在mapper接口上
@Configuration: 等同于 Spring 的 XML 配置文件，可以检查类型安全
- Web 常用注释
@RequestMapping: 提供路由信息，前端可以通过url执行该注释下的方法
@RequestMapping(value=“/user”,produces=“text/html;charset=utf-8”)
produces里面的是编码格式
@ResponseBody: 表示方法的返回给到客户端，如果没有这个注解会返回modelandview对象，字符串返回的是字符串，对象返回的是json串。
@RequestParam: 将请求参数绑定到控制器的方法参数上
@PathVariable: 用于接受路径参数
前端
Vue3 Vue3官网
element-ui element-ui官网
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
