前后端自学笔记

前后端自学笔记 JavaWeb 依赖包 mysql驱动 (注意需要去掉runtime，否则报错)

 mysql
 mysql-connector-java

高性能缓存组件

 本地缓存

 com.google.guava
 guava
 19.0

跨域身份验证解决⽅案 Json web token包

 io.jsonwebtoken
 jjwt
 0.7.0

通⽤⼯具包

 org.apache.commons
 commons-lang3
 3.9
 

mybaits依赖

 org.mybatis.spring.boot
 mybatis-spring-boot-starter
 2.1.2
 

热部署

  
 org.springframework.boot 
 spring-boot-devtools 
 true 
 
 
打包时用的
 
 
 
 org.springframework.boot
 spring-boot-maven-plugin
     
 
 true
 
     
 
 
 

热部署还需要如下设置(配置完后重启idea即可生效)

21年以前版本设置:

使⽤快捷键打开，选择Registry

注意默认快捷键：
 window快捷键 Shift+Ctrl+Alt+/
 mac快捷键 Shift+Command+Alt+/

选择compiler.automake.allow.when.app.running ，重启idea就⾏！！！

配置文件 数据库配置

server.port=8080
#==============================数据库相关配置========================================
spring.datasource.driver-class-name =com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/xiaodi?
useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
#使⽤阿⾥巴巴druid数据源，默认使⽤⾃带的
#spring.datasource.type =com.alibaba.druid.pool.DruidDataSource
#开启控制台打印sql
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
# mybatis 下划线转驼峰配置,两者都可以
#mybatis.configuration.mapUnderscoreToCamelCase=true
mybatis.configuration.map-underscore-to-camel-case=true
#配置扫描
mybatis.mapper-locations=classpath:mapper
    //只返回状态码
    public static JsonData buildSuccess(){
    return new JsonData(0,null,null);
    }
    public static JsonData buildSuccess(Object data){
        return new JsonData(0,data,null);
    }
    //返回数据
    public static JsonData buildSuccess(Object data,String msg){
        return new JsonData(0,data,msg);
    }

    
    //自定义错误信息
    public static JsonData buildError(String msg){
        return new JsonData(-1,null,msg);
    }
    //自定义状态码 和错误信息
    public static JsonData buildError(Integer code,String msg){
        return new JsonData(code,null,msg);
    }
    public Integer getCode() {
        return code;
    }
    public void setCode(Integer code) {
        this.code = code;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
}

JWTUtils工具

public class JWTUtils {
    
    private static final long EXPIRE=6000*60*24*7;
    
    private static final String SECRET="Liang";
    
    private static final String TOKEN_PREFIX="feng";
    
    private static final String SUBJECT="liang";

    
    public static String geneJsonWebToken(User user){
        String token=Jwts.builder().setSubject(SUBJECT)
                .claim("name",user.getName()) //把用户信息传入token中
                .claim("head_img",user.getHeadImg())
                .claim("phone",user.getPhone())
                .claim("id",user.getId())
                .setIssuedAt(new Date()) //设置下发时间
                .setExpiration(new Date(System.currentTimeMillis()+EXPIRE)) //设置过期时间
                .signWith(SignatureAlgorithm.HS256,SECRET) //设置签名方式
                .compact();
        return token=TOKEN_PREFIX+token;
    }

    
    public static Claims checkJWT(String token){
        try {
            final Claims claims=Jwts.parser()
                                .setSigningKey(SECRET)
                                .parseClaimsJws(token.replace(TOKEN_PREFIX,""))
                                .getBody();
            return claims;
        } catch (Exception e) {
            return null;
        }
    }

拦截器

//连接这个接口
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        try {
            String token = request.getHeader("token");
            if(token==null){
                token = request.getParameter("token");
            }
            if(StringUtils.isNotBlank(token)){
            Claims claims = JWTUtils.checkJWT(token);
            if(claims == null){
                //TODO 登录失败 给前端的提示
                sendJsonMessage(response, JsonData.buildError("登录过期,重新登录"));
                return false;
            }
            Integer id = (Integer) claims.get("id");
            String name =(String) claims.get("name");
            //返回给前端的信息
            request.setAttribute("user_id",id);
            request.setAttribute("name",name);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        sendJsonMessage(response, JsonData.buildError("登录过期,重新登录"));
        return false;
    }

    
    public static void sendJsonMessage(HttpServletResponse response,Object obj){
        try {
            ObjectMapper objectMapper = new ObjectMapper();//序列化json
            response.setContentType("application/json;charset=utf-8");
            PrintWriter writer = response.getWriter();
            writer.print(objectMapper.writevalueAsString(obj));
            writer.close();
            response.flushBuffer();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    
在config层的配置    

@Configuration
    //连接这个接口
public class InterceptorConfig implements WebMvcConfigurer {
    @Bean
    LoginInterceptor loginInterceptor(){
        return new LoginInterceptor();
    }
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor()).addPathPatterns("/api/v1/pri**");//设置拦截路径  注意斜杠一定要加！！！
        //.excludePathPatterns("/api/v1/pri/user/login","/api/v1/pri/user/register");//拦截路径中   不拦截哪些路径
        WebMvcConfigurer.super.addInterceptors(registry);
    }
}

注意事项 springBoot在线配置

在构建项目时要记得添加

controller层
@RestController
@RequestMapping("/api/v1/video")
service层
@service
mapper层可以在主方法设置mapper路径
@MapperScan("com.liang.WebTest.mapper")

@RequestParam(value = "video_id",required = true) 方法中要填参数 添加这个注解  设置为必填选项
@Param("video_id") 在mapper层  参数设置一个名称 利于mybatis映射   
@JsonProperty  把属性名序列化成另一个名称 起别名  @JsonProperty("video_id")
    										private Integer videoId; 
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") 设置日期格式

三表关联查询

   	
     
	
         
         
		
                    
                    
         
    

 通过resultMap关联起来
 
定义全局异常 
public class LException extends RuntimeException{
    private Integer code; //异常状态码
    private String msg; //异常状态信息
    //有参的构造函数    
    public LException(Integer code, String msg) {this.code = code;this.msg = msg;}
    //get和set方法
    public Integer getCode() {return code;}
    public void setCode(Integer code) {this.code = code;}
    public String getMsg() {return msg;}
    public void setMsg(String msg) {this.msg = msg;}
    
    
    
    @ControllerAdvice
public class CustomExceptionHandler {
    @ExceptionHandler(value = Exception.class)
    @ResponseBody  
    public JsonData handle(Exception e){
        if(e instanceof LException ){ //判断异常是不是自定义异常类
            LException lException=(LException)e;
            //如果是 则把状态码和信息返回给前端
            return JsonData.buildError(lException.getCode(),lException.getMsg());
        }else{
            //如果不是 则返回全局异常
            return JsonData.buildError("全局异常,未知错误");
        }
    }
}
 
containsKey 判断值是否为空  user.containsKey("n")
 
MD5加密 
    public static String MD5(String data) {
        try {
            java.security.MessageDigest md = MessageDigest.getInstance("MD5");
            byte[] array = md.digest(data.getBytes("UTF-8"));
            StringBuilder sb = new StringBuilder();
            for (byte item : array) {
                sb.append(Integer.toHexString((item & 0xFF) | 0x100).substring(1, 3));
            }
            return sb.toString().toUpperCase();
        } catch (Exception exception) {
        }
        return null;
    }
 
随机头像⽣成 
private static final String [] headImg = {
            "https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/12.jpeg",
            "https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/11.jpeg",
            "https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/13.jpeg",
            "https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/14.jpeg",
            "https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/15.jpeg"
    };

public static String getImg(){
        int size=headImg.length;  //拿到headImg数组的长度
        Random random=new Random(); 
        int index = random.nextInt(size); //从0到设置长度中  取一个随机数
        return headImg[index]; //返回出headImg的随机头像
    }
 
开启事物控制 
启动类 @EnableTransactionManagement
业务类，或者业务⽅法 @Transactional
默认事务的隔离级别和传播属性
 
guava缓存(本地)设置 
@Component
public class baseCache {
    private Cache tenMinuteCache= CacheBuilder.newBuilder()
            .initialCapacity(10) //缓存最小值  缓存初始大小
            .maximumSize(100) //缓存最大值
            .concurrencyLevel(5) //并发数
            .expireAfterWrite(10, TimeUnit.SECONDS)  //过期时间  十分钟
            .recordStats()
            .build();

    public Cache getTenMinuteCache() {
        return tenMinuteCache;
    }

    public void setTenMinuteCache(Cache tenMinuteCache) {
        this.tenMinuteCache = tenMinuteCache;
    }
}

应用
public class CacheKeyManager {
    
public static final String INDEX_BANNER_KEY="index:banner";
}

public List bannerList(){
try {
Object cacheObj=baseCache.getTenMinuteCache().get(CacheKeyManager.INDEX_BANNER_KEY,()->{
       List listBanner = videoServiceImpl.bannerList();
       System.out.println("从数据库中拿轮播图数据");
       return listBanner;
       });
       			if(cacheObj instanceof List){
                List listBanner=(List)cacheObj;
                return listBanner;
            	}
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
 
浏览器跨域 
跨域：浏览器同源策略 1995年，同源政策由 Netscape 公司引⼊浏览器。⽬前，所有浏览器都实
⾏这个政策。 最初，它的含义是指，A⽹⻚设置的 cookie，B⽹⻚不能打开，除⾮这两个⽹⻚"同 源"。所谓"同源"指的是"三个相同
协议相同 http https
域名相同 www.xdclass.net
端⼝相同 80 81
⼀句话：浏览器从⼀个域名的⽹⻚去请求另⼀个域名的资源时，域名、端⼝、协议任⼀不同，都是跨域
浏览器控制台跨域提示：
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.    
 
解决方案 
1）JSONP
 2）Http响应头配置允许跨域
 nginx层配置 https://www.cnblogs.com/hawk-whu/p/6725699.html
 3）程序代码中处理 SpringBoot 通过拦截器配置
//interceptor层添加class类
public class CorsInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //表示接受任意域名的请求,也可以指定域名
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("origin"));
        //该字段可选，是个布尔值，表示是否可以携带cookie
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT,PATCH, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        //域检处理  判断是不是非简单请求   非简单请求:含有@RequestBody  前端返回json
        if(HttpMethod.OPTIONS.toString().equals(request.getMethod())){
            return true;
        }
        return HandlerInterceptor.super.preHandle(request, response, handler);
    }
}


@Configuration //config层添加拦截器配置
public class InterceptorConfig implements WebMvcConfigurer {
    @Bean
    CorsInterceptor corsInterceptor(){
        return new CorsInterceptor();
    }
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        
        registry.addInterceptor(corsInterceptor()).addPathPatterns("/**");
        WebMvcConfigurer.super.addInterceptors(registry);
    }
 
Linux命令 
1、cd命令 功能说明：切换目录。 举 例：cd /usr/local/；cd ..；cd - 
2、ls命令 功能说明：列出目录内容。 举 例：ls -ltr ；ls -lrt /home/ 
3、pwd命令 功能说明：查询所在目录。 举 例： pwd 
4、cat命令 功能说明：查看小文件内容。 举 例：cat -n 123.txt 
5、more命令 功能说明：查看大文件内容 举 例：more System.map-3.10.0-123.el7.x86_64
6、head命令 功能说明：查看文件的前面N行。 举 例：head -20 System.map-3.10.0-123.el7.x86_64 
7、tail命令 功能说明：查看文件的后面N行。 举 例：tail -f access.log ；tail -20 access.log 
8、touch命令 功能说明：创建一个空文件。 举 例：touch 123.txt 
9、mkdir命令 功能说明：创建目录。 举 例：mkdir -p /tmp/XD/XD/class 
10、rmdir命令 功能说明：删除目录。 举 例：rmdir /tmp/XD/XD/class 
11、 cp命令 功能说明：拷贝文件。 举 例：cp 123.txt class/ ； cp -a 123.txt class/789.txt 
12、 mv命令 功能说明：移动或更名现有的文件或目录。 举 例：mv 123.txt 345.php ；mv 789.txt /home/987.php 
13、rm命令 功能说明：删除文件或目录。 举 例：rm 987.php ；rm -rf 456.txt 
14、 diff命令 功能说明：对比文件差异。 举 例：diff 123.txt 456.txt 
15、ssh命令 功能说明：远程安全登录方式。 举 例：ssh 192.168.226.131 
16、exit命令 功能说明：退出命令。 举 例： 
17、id命令 功能说明：查看用户。 举 例：id root 
18、uname命令 功能说明：查询主机信息。 举 例：uname -a 19、ping命令
 
MySql 
增
 
INSERT INTO 表名称 VALUES (值1, 值2,....)
 
删
 
DELETE FROM 表名称 WHERe 列名称 = 值 
 
改
 
UPDATe 表名称 SET 列名称 = 新值 WHERe 列名称 = 某值
 
查
 
SELECT 列名称 FROM 表名称
select * from video_banner order by weight 	asc  升序（不写也可）
											desc 降序
 
查询 获取主键
 
useGeneratedKeys="true" 获取主键  数据库的id和实体类的id映射

        INSERT INTO `video_order`(`out_trade_no`, `state`)
        VALUES (#{outTradeNo,jdbcType=VARCHAR}, #{state,jdbcType=INTEGER});

 
写sql语句时记得添加


 
前端 
Vue 
Npm -s -d的意思 
npm install moduleName # 安装模块到项目目录下
npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。
npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件dependencies节点写入依赖。
npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
 
后端连接前端获取数据 
首先查看是否已经安装axios 
cnpm install axios -s
 
src层下面写一个request.js 
import axios from 'axios'
const service = axios.create({
    //url = base url + reqeust url
    baseURL : "http://127.0.0.1:8089", 
    //配置请求超时时间
    timeout: 5000
})
export default service
 
src层下面api层getData.js 
import axios from '../request'
//注册接口
export const registerApi = (phone, pwd , name)=> axios.post("/api/v1/pri/user/register",{
    "phone":phone,
    "pwd":pwd,
    "name":name
})
//登录接口
export const loginApi = (phone, pwd) => axios.post("/api/v1/pri/user/login",{
    phone,
    pwd
})
//轮播图接口
export const getBanner = () => axios.get("/api/v1/pub/video/list_banner")
//视频详情
export const getVideoDetail = (vid)=> axios.get("/api/v1/pub/video/find_detail_by_id?",{
    params: {
        video_id:vid
    }
})
//下单接口
export const saveOrder = (token, vid)=>axios.post("/api/v1/pri/order/save",{
    "video_id":vid
},{
    headers:{
        "token":token
    }
})
//用户信息接口
export const getUserInfo = (token)=>axios.get("/api/v1/pri/user/find_by_token",{
    params:{
        "token":token
    }
})
 
应用方法层 
//vue实例⽣命周期 created：在模板渲染成html前调⽤，即通常初始化某些属性值，然后再渲染成视图
//vue实例⽣命周期 mounted：在模板渲染成html后调⽤，通常是初始化⻚⾯完成后，再对html的dom节点进⾏额外的 *** 作
import {bannerListApi} from '../api/getData.js'
export default {
  data() {
    return {
      bannerList:[]  //设置一个空数组 用来存放后端传过来的值
    }
  },
  methods:{
    async getBannerList(){ //定义一个方法
      const result=await bannerListApi();
      console.log(result)
    }
  },
  mounted(){
    this.getBannerList()
  },
}
 
手机端UI库 
Nut-UI(京东技术团队开发。)  https://nutui.jd.com/#/
Mint-UI( 饿了么公司基于vue开的的vue的Ui组件库)  http://mint-ui.github.io/#!/zh-cn
Cube-UI(滴滴公司技术团队开发。) https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start
We-UI(同微信原生视觉体验一致的基础样式库)  https://weui.io/
Vant-UI  https://youzan.github.io/vant/#/zh-CN/
Vant-UI(app) https://youzan.github.io/vant-weapp/#/quickstart
 
安装vue脚手架 
vue cli3 安装指定版本
卸载已经安装的版本
原因： 4.0 由于版本过高 很多插件不支持所以卸载高版本 指定低版本
npm uninstall -g @vue/cli
npm install -g @vue/cli@版本号
这里我采用了 vue cli3 的最高版本 3.12.1
故命令为：
cnpm install -g @vue/cli@3.12.1
 
解决多次点击导航栏出错 
import Router from 'vue-router';
//路由导航冗余报错（路由重复）
const originalPush = Router.prototype.push
      Router.prototype.push = function push(location) {
        return originalPush.call(this, location).catch(err => err)
      }
 
常用代码 
//跳转页面, 根据业务需要
this.$router.push({path:'/personal'})
 
布局 
border: 5px solid rgb(36, 33, 29); 设置边框
 
flex布局 
Flex 是 Flexible Box 的缩写，意为"d性布局"，用来为盒状模型提供最大的灵活性。
 
.box{
  display: flex;
}
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
 
基本概念 
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
 
 
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
 
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
 
各种问题解决方案 
properties文件中文乱码解决 
1.IDEA文件编码一般都修改为utf-8:setting–>file encodings—>Global Encoding 和 Project Encoding 都设置为UTF-8
 
2Properties 文件， Transparent native-to-ascii conversion 主要用于转换 ascii，一般都要勾选，不然 Properties 文件中的注释显示的都不会是中文。
 
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGoUorQG-1637293275800)(https://www.pianshen.com/images/481/f7aad52f4b844193e0c42f1a47c3cbe9.png)]
 
mysql设置键唯一值 
设计表–>索引–>索引类型
 
1. Fulltext 全文本搜索索引：用于搜索长篇文章。
2. Unique 唯一索引：
		主键索引：primary key ：加速查找+约束（不为空且唯一）
  		唯一索引：unique：加速查找+约束 （唯一）
3. 联合索引：    
 		-primary key(id,name):联合主键索引
        -unique(id,name):联合唯一索引
        -index(id,name):联合普通索引
4. Normal 普通索引：加快搜索。
5. Spatial 空间索引。    
 
 
win10杀死端口 
查看端口 netstat -ano | findstr "8080"
 
杀死进程taskkill -PID 8080 -F
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/zaji/5564232.html
命令功能设置文件配置
赞
(0)
打赏
微信扫一扫
支付宝扫一扫
维基经济学一级用户组
00

生成海报
JDK1.7新特性之资源自动管理
上一篇
2022-12-14
java8 取出list中的对象的某一属性

下一篇2022-12-14

发表评论

请登录后评论...
登录后才能评论
提交
评论列表（0条）

	



















保存