模板建站3000是不是贵了,自建网站投放广告,服装店网站建设规划书,网上做网站广告投放项目笔记#xff0c;教学视频来源于B站青戈 https://www.bilibili.com/video/BV1H14y1S7YV 前两个笔记。是把前端页面大致做出来#xff0c;接下来#xff0c;把后端项目搞一下。 后端项目#xff0c;使用IDEA软件、jdk1.8、springboot2.x 。基本上用的是稳定版。 还有My…项目笔记教学视频来源于B站青戈 https://www.bilibili.com/video/BV1H14y1S7YV 前两个笔记。是把前端页面大致做出来接下来把后端项目搞一下。 后端项目使用IDEA软件、jdk1.8、springboot2.x 。基本上用的是稳定版。 还有Mysql5.7、Navicat。 IDEA软件、jdk1.8要在电脑上安装配置好springboot2.x是待会要创建的。
创建后端项目
打开IDEA点击“新建项目”出来一个新页面、
左侧选择Spring initializr右侧是项目的多项信息配置。以下是我根据up讲解配置的信息。
注意[位置]的路径最好是跟前端项目处在同一文件夹下即前端项目当前的路径为 D:\Projects\B站青戈vue3\vue3-demo
[工件] 英文名是artifact默认与名称一致即可
名称springboot-vue3位置D:\Projects\B站青戈vue3\语言Java类型Maven组com.example工件springboot-vue3软件包名称com.example.springbootJDK1.8Java8打包Jar
上面的配置完毕点击“下一步”就会切换到下一个配置页面。
补充
Springboot若选择3.0以上的版本只能选择JDK17版本。所以若使用了JDK8springboot只能选择2.7系列版本
MyBatis 是一个OM框架基于java和数据库之间数据交互而设计的框架常见的增删查改数据库操作就可以借助MyBatis必须要有MyBatis 基础才行。 Springboot 2.7.6 依赖项 WebSpring Web SQLMySQL Driver MyBatis Framework
选好上面的三项以后就可以点击“创建”了。
创建好后就会自动打开新页面但是后台还在下载依赖默认是从官网上下载速度会较慢。
可以考虑配置私服在设置里面搜索“Maven”右侧有几个路径up设置了阿里云怎么弄的百度搜索 “pom配置阿里云”搜索到相应代码后直接复制然后粘贴到pom.xml文件中的build 标签中。有个情况如果复制过去后刷新依赖下载若爆红说明用不了删掉就行了。
找到这个路径下的文件src\main\java\com\example\springboot\SpringbootVue3Application.java 这个文件是启动文件可以运行试试看启动文件的左侧有个绿色三角箭头点这里启动。
报错如下。 Description: Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the following: If you want an embedded database (H2, HSQL or Derby), please put it on the classpath. If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active). 这个报错是说没有配置数据库依赖需要在application.yml里配置数据库。找到这个路径下的文件src\main\resources\application.properties 把这个文件的后缀由properties改成yml具体重命名步骤。选中这个文件右键选择“重构”然后再选“重命名” 配置数据库
然后在这个文件内
配置服务器端口默认是8080但是up改成9090配置数据库依赖信息要与自己电脑的数据库路径一致、账号密码也要一致 server: port: 9090 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/springboot-vue3 username: root password: 123456 注意up的application.yml文件只有上面这些内容 打开navicat软件。
up打算在localhost_3306 连接新建数据库。
若无法成功打开数据库连接可以试试这篇文章主要是没启动MYSQL 于是如上图红框处选中这个右键“新建数据库”然后弹出来一个数据库信息配置页面需要配置的具体信息如下图。 数据库名springboot-vue3字符集utf8mb4排序规则utf8mb4_unicode_ci
好奇为什么字符集和排序规则要用上面两个所以我去搜了相关的解析。
mysql使用utf8mb4经验吐血总结_mysql utf8mb4-CSDN博客
简要总结一下
utf8mb4 utf8 。前者是新版本能容纳更多特殊字即前者包含后者前者兼容量更大。utf8mb4_unicode_ci 基于标准的Unicode来排序和比较能够在各种语言之间精确排序。
数据库新建成功后运行IDEA的项目若出现下图则表示该项目运行成功 浏览器访问尝试
之后打开浏览器输入 localhost:9090 尝试打开后端项目如下图所示成功了。 下一步弄个页面试试即接口。
在此路径下src\main\java\com\example\springboot 选中末尾的文件夹右键新建一个package(软件包)出现下图的弹窗直接在末尾加上controller
接着在这个controller软件包下右键新建Java类如下图命名为 WebController 于是在这个 WebController文件下写代码。
先写入注解RestController 首先controller层是一个对外开放的接口层。当他里面的所有方法暴露出去后可以通过getMapping或者postMapping获取方法。
举例说明。写一个hello方法返回值是一个字符串Hello World让浏览器可以访问到借助getMapping(“/HI”)的注解在浏览器输入localhost:9090/HI页面上就能看到字符串Hello World。
package com.example.springboot.controller;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;RestController
public class WebController {GetMapping(/HI)public String hello(){return Hello World;}
}但是不知道为啥按照up的步骤操作但是访问错误。怀疑是启动类没配置好还是说具体配置有什么讲究
为了跟up的讲解视频保持一致我把一个默认启动的demo文件夹删除了。操作记录如下图。
然后神奇的事情发生了浏览器可以访问 http://localhost:9090/HI出现对应的字符串了。玛德服了。 数据库建表 增删改查语句
下一步数据库建表。
打开Navicat软件然后localhost_3306找到数据库springboot-vue3选中下面的“表”右键“新建表”设计的表基础信息如下。注意id是要勾选自增长。
建好后就可尝试增删改查的SQL语句先在数据库里面插两条数据。
补充
limit子句用于限制查询结果返回的数量常用于分页查询SELECT * FROM user WHERE address like ‘%合肥%’ LIMIT 1,2; limit在此处的意思是查出的记录从表格中序号为1的记录开始展示每页展示一条记录
INSERT INTO user(name, date, address) VALUES(张三, 2023-06-11, 安徽省合肥市);
INSERT INTO user(name, date, address) VALUES(李四, 2023-11-24, 江苏省南京市);
UPDATE user SET name 青哥哥 WHERE id 1;
DELETE FROM user WHERE id 1;
SELECT * FROM user WHERE address like %合肥% LIMIT 1,2;创建 实体类
数据库有数据了需要借助代码进行增删改查前提需要创建实体类entity步骤如下。
在此路径下src\main\java\com\example\springboot 选中末尾的文件夹右键新建一个package(软件包)在末尾加上entity。
接着在 entity路径下新建一个Java类命名User参考下图。 创建好后在User文件里面写代码把数据库user表的实体创建出来代码如下。
package com.example.springboot.entity;public class User {private Integer id;private String date;private String name;private String address;
}这里额外补充了如果数据库里面的列名有下划线比如user_no但是在Java规范中实体类的命名不允许出现下划线只能驼峰命名即userNo。那么该怎么解决这个下划线问题
先留着后面解决。
下一步对实体类生成get和set方法有个快捷键同时点击 “Alt” 和 “Insert” 两个键。
出现一个“生成”弹窗选择 “Setter 和 Getter”之后新出一个弹窗选中所有实体类快捷键点击 “Shift” 方向键 向下 最后点击“确定”即可生成所有实体类的set和get函数。 实现 接口类控制类
光有实体类还不行还需要一个接口类对实体类进行操作即mapper类步骤如下。
在此路径下src\main\java\com\example\springboot 选中末尾的文件夹右键新建一个package(软件包)在末尾加上mapper。
接着在 mapper路径下新建一个Java 接口类命名UserMapper参考下图。 创建好后在UserMapper文件里面写代码想实现在路由上加上某个字对user表进行模糊查询把查询到的数据显示在浏览器页面上。
补充
加入注解 Mapper 声明这是一个Mapper对象先写一个函数来查询user表的数据
emmm运用了javaweb和mybatis的知识up没有细说默认看视频的都会…没办法只能搬代码了
src\main\java\com\example\springboot\mapper\UserMapper.java
package com.example.springboot.mapper;import com.example.springboot.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;Mapper //????
public interface UserMapper { //接口类Select(select * from user where name like %#{name}%) ListUser selectAll(String name); //接口类声明函数及其参数
}为了在浏览器页面上显示查询效果在 controller 层新建一个Java文件命名 UserController
package com.example.springboot.controller;import com.example.springboot.entity.User;
import com.example.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.util.List;RestController //??
RequestMapping(/user) //??应该是路由
public class UserController {Autowired //??UserMapper userMapper;GetMapping(/all) //都是路由为什么名字不完全一样//表示访问到这个函数返回值其路径是【localhost:9090/user/all/name?xxx】public ListUser selectAll(RequestParam String name){ //RequestParam?? 实现接口return userMapper.selectAll(name);//读不懂}
}感觉要自己去网上找知识点去梳理一下因果。
上面的代码写好后需要验证一下代码写出的sql语句是否能正确访问到。故需要打印出I代码生成的sql语句
在此路径下src\main\resources\application.yml 添加下面的代码。
logging:level:com.example.springboot.mapper: debug运行项目在下面红框处可以看到打印的sql语句 然后继续测试在浏览器输入 localhost:9090/user/all/name?张 这样是为了实现模糊查询user表中name列中是否含有“张”的记录。
//为什么 路由后缀要这样写
但是运行项目发现报错如下。 Parameter index out of range (1 number of parameters,which is 0). 这个报错大致意思是说不支持上面方法生成的SQL语句。
所以需要修改生成SQL语句的方法。
修改的第一种方法能实现模糊查询。把多余的代码省略了
public interface UserMapper {Select(select * from user where name like #{name}) //删掉这里的%
}public class UserController {//表示访问到这个函数返回值其路径是【localhost:9090/user/all/name?xxx】public ListUser selectAll(RequestParam String name){return userMapper.selectAll( % name %) ; //修改这里的拼接在这里加上%}
}修改的第二种方法能实现正确查询把多余的代码省略了【我试了自己的项目不得行……………】
补充MySQL中CONCAT函数将多个字符串连接成一个字符串。
public interface UserMapper {Select(select * from user where name like concat(%,#{name},%)) //修改这里的拼接增加%
}public class UserController {//表示访问到这个函数返回值其路径是【localhost:9090/user/all/name?xxx】public ListUser selectAll(RequestParam String name){return userMapper.selectAll( name ) ;//修改这里的拼接删掉%}
}解决下划线转驼峰
遗留问题如果数据库里面的列名有下划线比如user_no但是在hava规范中实体类的命名不允许出现下划线只能驼峰命名即userNo。那么该怎么解决这个下划线问题
在此路径下src\main\resources\application.yml 添加下面的代码利用mybatis开启下划线自动转驼峰。
mybatis:configuration:map-underscore-to-camel-case: true # 开启下划线自动转驼峰比如说这个user表添加user_no的列名并添加相应数据那么如何反馈到前端页面上。 来到后端项目的entity/user路径下添加这个属性及相关方法代码如下 private String userNo;public User(Integer id, String date, String name, String address, String userNo) {this.id id;this.date date;this.name name;this.address address;this.userNo userNo;}public String getUserNo() {return userNo;}public void setUserNo(String userNo) {this.userNo userNo;}然后userMapper文件的SQL语句也要相应修改这样可以通过其他关键字查询信息 Select(select * from user where name like concat(%,#{name},%) or date like concat(%,#{name},%) or address like concat(%,#{name},%) or user_no like concat(%,#{name},%)) 接着改前端项目HomeView.vue的 el-table-column propuserNo label用户编号 width150/el-form-item label用户编号el-input v-modelstate.form.userNo autocompleteoff//el-form-item测试 浏览器获得数据库信息
比如AJAX,axious这些工具是前端向后端请求数据的方式。
但是返回的数据那么多需要做一个统一所以写一个统一数据格式的函数步骤如下。
新建一个软件包。
在此路径下src\main\java\com\example\springboot 选中末尾的文件夹右键新建一个package(软件包)直接在末尾加上common 。然后在此软件包下新建一个Java文件命名Result 。
接着编写代码。
package com.example.springboot;public class Result {private String code; //返回的状态码。告诉前端这次请求成功还是失败private String msg; //错误信息private Object data; //包装的数据。对象类型
}然后 快捷键ALT Insert 选择所有变量生成setter 和getter 。//为什么要生生成set。get? 快捷键ALT Insert 选择“构造函数”选择所有变量“确定” 快捷键ALT Insert 选择“构造函数”选择code和msg“确定” 快捷键ALT Insert 选择“构造函数”什么都不选“确定” //这种是默认的
然后增加两个返回状态成功或失败。 private static final String SUCCESS_CODE 200; //成功private static final String ERROR_CODE 500; //失败public static Result success(Object data){return new Result(SUCCESS_CODE, , data) ;}public static Result success(){return new Result(SUCCESS_CODE, );}public static Result error(String msg) {return new Result(ERROR_CODE,msg);}修改相应函数在Mapper路径那里 public Result selectAll(RequestParam String name){ //为什么改成result
// return userMapper.selectAll( % name %) ;
// return userMapper.selectAll( name ) ;ListUser userList userMapper.selectAll(name);return Result.success(userList);}运行项目在浏览器再次输入 localhost:9090/user/all?name张 然后局可以看到统一包装的返回数据。 对接 前后端项目
打开前端vue项目进行环境配置有两种方案。先看介绍后实操。
方案
方案一如下【较麻烦】
.env.dev
VITE_ENV dev
VITE_BASE_URL http://localhost:9090.env.prod
VITE_ENV prod
VITE_BASE_URL http://qing.vue.com修改 package.json
scripts: {dev: vite --mode dev,prod: vite --mode prod,build: vite build -- mode prod,preview: vite preview},使用import.meta.env.VITE_BASE_URL 方案二如下【推荐且使用】更简单的方式配置全局后台URL。
在前端项目在 public文件夹新建config.json 里面的代码如下直接复制粘贴若报错直接手敲
{serverUrl: http://localhost:9090
}main.js 里使用axios读取配置
/* 读取外部配置文件 */
axios.get(/config.json).then((res) {app.config.globalProperties.$config res.data
})
export const globals app.config.globalPropertiesaxious安装和使用
上面摘取自up的笔记下面开始具体记录方案二的实施过程。
在前端项目打开终端输入下面的命令若下载失败可以退出用管理员身份运行的方式打开项目全局安装axious当时up的版本是1.4.0 npm install axios -g 下一步在前端项目src路径下新建文件夹命名utils 然后新建一个文件命名 request.js 具体代码复制粘贴如下
import axios from axios;const request axios.create({baseURL: http://localhost:9090,timeout: 30000 //超时时间为30秒
})// 请求拦截器
// 所有的请求都会到这里来,会去执行第一个参数同时自动传入config
request.interceptors.request.use(config { // 在发送请求之前做些什么config.headers[Content-Type] application/json;charsetutf-8return config
}, error { // 对请求错误做些什么console.log(request error: error) // for error debugreturn Promise.reject(error)
})//响应拦截器
//所有的响应都会到这里来,会去执行第一个参数同时自动传入response
request.interceptors.response.use(response { // 对响应数据做点什么let res response.data// res.code //错误的状态码return res
}, error { //对响应错误做点什么console.log(response error: error) // for error debugreturn Promise.reject(error)
})export default request前端数据对接配置
接下来开始尝试对接。
前提保证后端项目正常运行。
首先来到前端项目的src/views/HomeView.vue文件中up说若想轻松使用数据更推荐使用reactive类型的数据但是前端项目的tableDta是ref数据而且up推荐把复杂的多项数据都封装到统一的变量中。
详情看代码
原来
let tableDate ref([{date: 2017-05-03,name: Jerry,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},
])let form reactive({})修改
const state reactive({form :{}, //注意把等号改为冒号tableData : [{date: 2017-05-03,name: Jerry,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},]
})el-table :datestate.tableData stylewidth: 100%; el-form :modelstate.form label-width80px stylepadding-right: 40pxel-input v-modelstate.form.date autocompleteoff/el-input v-modelstate.form.name autocompleteoff/el-input v-modelstate.form.address autocompleteoff/把js里面所有涉及form和tableData的变量加上前缀state.
state.formstate.tableData //把后面的 .value 删掉因为已经不是ref类型了前端项目的src/views/HomeView.vue文件中接下来在js添加一个加载函数。就是通过路由向后端请求数据显示在前端页面上。注意是input.value而不是name.value
import request from ../../utils/request;const state reactive({form :{}, //注意把等号改为冒号tableData : []
})const load () {request.get(user/all?name input.value).then(res { //不是nameconsole.log(res)})
}load()运行前端项目但是报错 up解释这个报错意思是没有返回 request的config 。
emmmm又重新刷新就没有这个bug了。
跨域配置
然后出现新的错误跨域错误如下图。 解决方案一在后端的src\main\java\com\example\springboot\controller\UserController.java加个注解CrossOrigin 【不建议】
CrossOrigin
RestController
RequestMapping(/user)
public class UserController {
//省略代码
}解决方案二在全局配置跨域【推荐】
新建一个软件包。
在此路径下src\main\java\com\example\springboot 选中末尾的文件夹右键新建一个package(软件包)直接在末尾加上config 。然后在此软件包下新建一个Java文件命名CrossOriginConfig 。
接着复制粘贴代码。注意粘贴代码进去之后需要导入包不要导错了一定要与下面给代码的导入包名一致。有个“Web”导错的话会导致return new CorsFilter(source);这句代码出现错误。若导入正确则不会。
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 CrossOriginConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE 24 * 60 * 60;Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration new CorsConfiguration();corsConfiguration.addAllowedOrigin(*); // 1 设置访问源地址corsConfiguration.addAllowedHeader(*); // 2 设置访问源请求头corsConfiguration.addAllowedMethod(*); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration(/**, corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}对接进展
确认浏览器运行的前端页面控制台打印出正确的数据后接着修改如下代码。注意是input.value而不是name.value
const load () {request.get(user/all?name input.value).then(res { //name改为inputstate.tableData res.data //改这里})
}若前端页面显示出数据库的信息则前后端对接成功了
接着在前端页面的搜索框输入关键字点击“查询按钮”发现没反应在需要进行相应修改如下按钮的其他属性带代码 省略
el-button clickload()查询数据/el-button当然以上只是根据name这一列进行查询若想任意关字都进行查询则需要更改后端项目中的SQL语句以及相关代码
public interface UserMapper {Select(select * from user where name like concat(%,#{name},%) or date like concat(%,#{name},%) or address like concat(%,#{name},%) ) ListUser selectAll(String name);}下一个功能。
加一个重置按钮回到前端项目的HomeView.vue
el-button classbutton typeprimary round clickload stylemargin: 5px 10px重置数据/el-buttonconst reset (){input.value load()
}
