实训20221024-20221028

好记性不如烂笔头。

这是个人在学习过程中认为需要记录的东西。

Day1

springboot

课前准备

项目创建步骤

使用Spring Boot中文社区

 

文件夹解释

注解

springboot提供了一个注释@RestController，这个注释的作用就是@Controller和@ResponseBody的结合体

@RequestMapping("/ ") //接收get和post请求

@PostMapping：post请求

@GetMapping：get请求

请求方式错误的提示

网址组成

URL: 请求：//地址：端口/资源（项目名称、处理器）？参数（键值对：name=value）&参数 比如：http://localhost:8080:two/hello?name=zhangsan&age=18

文件分割符

File.separator：根据系统的不一致，确定是斜杠"/"还是反斜杠""

资料

Day 2

创建数据表

sql语句：

-- 创建数据库，并指定字符编码为utf8 create database jjdb character set utf8;

-- 切换数据库 use jjdb;

-- 创建一个学生表 create table student( id int primary key auto_increment; -- 主键、自增 stuName varchar (200) comment "学生姓名"， userName varchar(200) unique,-- unique唯一 password varchar(200), stuAge int， stuSex varchar(10) )

连接步骤

1、导入依赖

mybits的依赖，包括mybits-plus

MySQL的依赖

数据库连接池

<!-- MyBatis plus依赖(里面包含了MyBatis依赖,可以直接使用MyBatis) -->

<dependency>

<groupId>com.baomidou</groupId>

<artifactId>mybatis-plus-boot-starter</artifactId>

    <version>3.4.1</version>

</dependency>

<!--Mysql驱动依赖-->

<dependency>

    <groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

    <version>5.1.47</version>

</dependency>

<!--数据库连接池 druid-->

<dependency>

<groupId>com.alibaba</groupId>

<artifactId>druid-spring-boot-starter</artifactId>

    <version>1.1.17</version>

</dependency>

2、配置数据源

application.properties中进行连接池配置

# 端口号
server.port=8081
​
#设置图片资源路径
spring.web.resources.static-locations=/uplodeFile
#设置文件上传的大小，默认1MB
spring.servlet.multipart.max-file-size=1MB
​
#配置数据库连接池
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/jjbd?useUnicode=true&characterEncoding=UTF8&serverTimezone=Asia/Shanghai&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
#mybatis日志打印类配置
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

3、增删改返回值

增删改操作返回的都是：受影响的行数（int 的值）

写持久层

在mapper或者dao层

写逻辑层

controller调用service层

封装数据

用util包装请求数据

Day3

vue

html快捷键：！加回车

所有事件要在el下才能使用

<!-- v-show 隐藏元素 -->

<!-- v-if 删除元素 -->

axios请求

axios.get(url).then(
​
•                    //响应成功
​
•                    function(data){
​
•                        console.log(data);
​
•                    },
​
•                    //响应失败
​
•                    function(err){
​
•                        console.log(err);
​
•                    }
​
•                )

vue cli（脚手架）：

在路径输入cmd，可以直接打开终端

在终端输入：vue create 项目名称（选小写）---回车---等待

键盘选Manually select features---回车

取消Linter（移动到Linter行，用空格取消选中）---回车

版本选择：2.×的版本---回车

配置选择在package.json---回车

选择不需要快照N---回车

等待构建完成

vue的使用

内容划分

template内是内容，只能有一个div

script内包含data（是一个方法，return，如下），methods，component，props

data:function(){
​
•        return{
​
•            userName:"",
​
•            password:""
​
•        }
​
•    },

插件的使用

组件方：props内包含需要数据属性，便于传输数据

使用方：

1、导入组件 import……from……

2、注册组件---在component中加入

3、使用--当需要数据传输时，在属性前面增加冒号

<!-- 需要data里的数据时或调用method的方法src前用冒号 -->

Day4

终端

下载element ui ：在终端使用 npm i element-ui -S，在package.json添加依赖

在终端输入npm install ：npm会根据package.json中需要的依赖进行下载包

下载axios请求：npm install axios

vue文件的使用方法

created()//当vue创建的时候，会自动调用方法

mounted()//当vue被完全加载完后，会自动调用该方法

跨域问题

后台注释解决跨域问题：@CrossOrigin//处理前端请求时的跨域安全问题

导入axios

axios：网络请求框架

注意：axios发送post请求时，默认传输的参数格式为json格式，解决方案，在参数前面添加@RequestBody注解

main.js添加，就可以设置全局变量axios

import axios from "axios";//导入axios
​
//为axios的默认url
​
axios.defaults.baseURL="http://localhost:8081/";
​
//全局配置 $http 等于 axios对象
​
Vue.prototype.$http = axios; 

axios具体使用方式

element ui组件库

参考官方入门Element - The world's most popular Vue UI framework

用终端下载element ui

在main.js中载入element ui

import ElementUI from 'element-ui'
​
import 'element-ui/lib/theme-chalk/index.css';
​
Vue.use(ElementUI)
​
Vue.config.productionTip = false

参考官网中快速上手直接使用

复盘

springboot+mybits+vue的使用

springboot的注释

深拷贝、浅拷贝：深拷贝指对指针指向的内容进行拷贝，深度复刻，指针指向的是另一个内存空间，每一级别的数据都会拷贝；浅拷贝指对指针的拷贝，指针指向的是同一个内存空间，只会拷贝一层，更深层次的对象级别只拷贝引用。一般来说用的都是浅拷贝。