vue2:实战三

已于 2022-04-30 18:49:44 修改
阅读量1k 收藏 1
点赞数
文章标签： java javascript
于 2022-04-29 11:43:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44953928/article/details/124492423
版权
本文介绍了Java注解的基本概念，包括元注解和自定义注解的使用，以及注解在项目中携带信息的角色。同时，详细阐述了Vue前端页面的安装和配置，包括vue.js、vue-router和vue-cli的安装步骤。后端部分讲解了Spring Boot应用的配置，如数据库连接、依赖管理和跨域请求处理，并展示了返回结果类和错误码接口的定义。
摘要由CSDN通过智能技术生成

文章目录


本地环境搭建 ：nodejs安装、npm安装

知识预备Java注解

1.什么是注解（annotation）

Java 注解是在 JDK5 时引入的新特性，注解（也被称为元数据）为我们在代码中添加信息提供了一种形式化的方法，使我们可以在稍后某个时刻非常方便地使用这些数据。

注解类型定义指定了一种新的类型，一种特殊的接口类型。

既然注解是一种特殊的接口，那么关键词@interface的写法也就表示注解的特殊性，来区分注解的定义和普通的接口声明。

程序可以通过反射来获取指定程序元素的注解对象，然后通过注解对象来获取注解里面的元数据。注解可以用于创建文档，跟踪代码中的依赖性，甚至执行基本编译时检查。

通俗的说，通过反射得到类里的各种注解信息，比如注解下的字段和属性方法，然后就可以根据这些信息执行特定的代码。

在框架里面使用注解的多，因为注解中的代码都已经实现过了，知道注解含义拿来用就完事了

2.项目携带信息的方式

  • 通过注解来携带信息,然后通过反射来读取信息

  • 通过文件来携带信息,然后通过IO来读取信息

2.元注解（meta-annotation）与自定义注解

我们还可以自定义注解，在JDK 1.5中提供了4个标准的用来对注解类型进行注解的注解类，我们称之为元注解。
我们可以使用这4个元注解来对我们自定义的注解类型进行注解，接下来，我们挨个对这4个元注解的作用进行介绍。

  • @Target注解：描述注解的使用范围，说明被Target修饰的注解可以用在什么地方

  • @Retention注解：描述注解保留的时间范围（被Retention描述的注解在它所修饰的类中可以被保留到何时） 。

  • @Documented注解：描述在使用 javadoc 工具为类生成帮助文档时是否要保留其注解信息

  • @Inherited注解：使被它修饰的注解具有继承性（如果某个类使用了被@Inherited修饰的注解，则其子类将自动具有该注解）

对于元注解的应用，在这里我们就不过多介绍，这里只是说一下元注解的定义和作用意义，想要学习元注解怎么用的可以去自行学习一下。

一、Vue前端页面开发

1.vue安装

  • vue.js安装
    我们之前已经安装好了nodejs和npm，要安装vue.js，CMD输入
npm install vue -g
  • vue-router安装
    我们之前已经安装好了nodejs和npm，要安装vue-router，CMD输入
npm install vue-router -g
  • vue-cli 3 脚手架安装（内置webpack）
    现在我们来安装vue-cli的开发脚手架,CMD输入
npm install vue-cli -g
  • 利用CMD命令行，输入下面的命令，对vue的版本进行查看
vue -V

在这里插入图片描述

二、后端部署

2.1

2.1.1.先新建过程

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2.2里面内容简单配置一下

1、先运行会出现URl错误,
2.然后对src\main\resources\application.properties，进行数据库配置
3.配置pom.xml

在这里插入图片描述
在这里插入图片描述

server.port=8088

spring.datasource.url=jdbc:mysql://localhost:3306/testblog?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC

spring.datasource.username: root
spring.datasource.password: 123456

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.thymeleaf.cache=false

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.7</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.juejin</groupId>
    <artifactId>logindemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>logindemo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!--mp-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>
        <!--mp代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.2.0</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>

        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                    <include>**/*.yml</include>
                </includes>
                <filtering>false</filtering>
            </resource>

            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.yml</include>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>

</project>

2.2.3定义返回类result和API操作码

在这里插入图片描述

package com.juejin.logindemo.api;

public class CommonResult<T> {
    private long code;
    private String message;
    private T data;

    protected CommonResult() {

    }

    protected CommonResult(long code, String message, T data) {
        this.code = code;
        this.message = message;
        this.data = data;
    }

    /**
     * 成功返回结果
     *
     * @param data 获取的数据
     */
    public static <T> CommonResult<T> success(T data) {
        return new CommonResult<T>(ResultCode.SUCCESS.getCode(), ResultCode.SUCCESS.getMessage(), data);
    }

    /**
     * 成功返回结果
     *
     * @param data    获取的数据
     * @param message 提示信息
     */
    public static <T> CommonResult<T> success(T data, String message) {
        return new CommonResult<T>(ResultCode.SUCCESS.getCode(), message, data);
    }

    /**
     * 失败返回结果
     *
     * @param errorCode 错误码
     */
    public static <T> CommonResult<T> failed(IErrorCode errorCode) {
        return new CommonResult<T>(errorCode.getCode(), errorCode.getMessage(), null);
    }

    /**
     * 失败返回结果
     *
     * @param message 提示信息
     */
    public static <T> CommonResult<T> failed(String message) {
        return new CommonResult<T>(ResultCode.FAILED.getCode(), message, null);
    }

    /**
     * 失败返回结果
     */
    public static <T> CommonResult<T> failed() {
        return failed(ResultCode.FAILED);
    }

    /**
     * 参数验证失败返回结果
     */
    public static <T> CommonResult<T> validateFailed() {
        return failed(ResultCode.VALIDATE_FAILED);
    }

    /**
     * 参数验证失败返回结果
     *
     * @param message 提示信息
     */
    public static <T> CommonResult<T> validateFailed(String message) {
        return new CommonResult<T>(ResultCode.VALIDATE_FAILED.getCode(), message, null);
    }

    /**
     * 未登录返回结果
     */
    public static <T> CommonResult<T> unauthorized(T data) {
        return new CommonResult<T>(ResultCode.UNAUTHORIZED.getCode(), ResultCode.UNAUTHORIZED.getMessage(), data);
    }

    /**
     * 未授权返回结果
     */
    public static <T> CommonResult<T> forbidden(T data) {
        return new CommonResult<T>(ResultCode.FORBIDDEN.getCode(), ResultCode.FORBIDDEN.getMessage(), data);
    }

    public long getCode() {
        return code;
    }

    public void setCode(long code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}


package com.juejin.logindemo.api;

public interface IErrorCode {
    long getCode();
    String getMessage();
}


package com.juejin.logindemo.api;

public enum ResultCode implements IErrorCode {
    SUCCESS(200, "操作成功"),
    FAILED(500, "操作失败"),
    VALIDATE_FAILED(404, "参数检验失败"),
    UNAUTHORIZED(401, "暂未登录或token已经过期"),
    FORBIDDEN(403, "没有相关权限");
    private long code;
    private String message;

    private ResultCode(long code, String message) {
        this.code = code;
        this.message = message;
    }

    public long getCode() {
        return code;
    }

    public String getMessage() {
        return message;
    }
}

2.2.4后端对跨域请求的解决CorsConfig

在这里插入图片描述

package com.juejin.logindemo.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() {
        System.out.println("222222222222");
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1
        corsConfiguration.addAllowedHeader("*"); // 2
        corsConfiguration.addAllowedMethod("*"); // 3
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }

}

2.2.5 编写实体类entity中的user

大家都知道springboot的业务逻辑：

实体类User从controller中根据service中的逻辑在mapper接口中和数据库交互这个逻辑

我们，先写实体类Dao/entity，规定好用户实体的基本方法，随后根据登录功能开发对应的mapper接口和数据库操作即为mapper对应的xml，写好之后，再写基本的service层里面的service接口以及对service的实现（即为Impl），最后，写登录的controller，说简单也简单，说困难也困难。

xiao52x
关注
Vue2项目实战
C_jiayouya的博客
12-26 1143
本文仅仅简单介绍了项目的大概框架，一些简单的页面展示及简单的组件封装，在想成为高级开发的路上还是需要不断努力地！愿每个人都能在自己热衷的道路上越走越远。
Vue2项目实战(一)
weixin_41989250的博客
02-08 1274
assets文件夹：一般也是放置静态资源(一般多个组件共用的静态资源)，需要注意，放在assets文件中的静态资源，webpack打包时会把静态资源当作一个模块打包到js文件里面。-编程式导航：利用组件实例的$router.push|replace方法，可以实现路由的跳转（可以写一些业务）答：不可以，路由传参的时候，对象的写法可以是name、path形式，但是不能与params参数一起使用。-params参数：属于路径当中的一部分，需要注意的是，在配置路由的时候，需要占位。
Vue2.0 项目实战篇-学不会算我的；
最新发布
Java.慈祥
08-13 1395
一级路由，定义为文件夹、index.vue主页面定义在所属的一级路由目录下；——————创建文件my-app/│├── src/│ ├── router/ # 定义路由组件配置 │ │ ├── index.js│ ├── views/ # 定义路由模块页面 │ │ ├── login/ #登录模块 │ │ │ │ ├── index.vue│ │ └── layout/ #首页模块——内涵多个二级子模块;│ │ │ │ ├── 首页.vue│ │ │ │ ├── 我的.vue。
Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day12
m0_55644132的博客
10-26 643
使用插件。
【vue2项目实战】---- 1.项目准备
baidu_20313315的博客
08-29 966
vue2项目实战
vue项目实战2
sober30的博客
08-10 436
接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835。- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用。官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/https://www.pnpm.cn/
Django+Vue：Python Web全栈开发
01-09
给大家分享一套课程——Django+Vue：Python Web全栈开发（基于Django4.1），已完结10章，附源码。
vue项目实战Vue实战项目篇源码.zip
05-31
vue项目实战Vue实战项目篇源码.zip Vue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码...
Vue3 源码实战课程下载（附源码）
11-07
Vue3 源码实战课程是专为开发者设计的学习资源，旨在帮助学员深入理解 Vue3 的核心机制，提升开发技能，并能够自定义实现类似功能。通过这个课程，你将有机会一窥 Vue3 的内部运作，从而更有效地优化应用性能，提高...
vue音乐：vue音乐app
02-12
Vue音乐 根据q音乐模拟音乐播放器h5项目## first npm i或npm install或使用cnpm 第二 npm run dev │ . babelrc │ . editorconfig │ . gitignore │ . postcssrc . js │ index . html ├─build ├─config │ ...
vue项目实战 vue项目实战
01-20
vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战...
vue2实战揭秘
10-25
vue2.0实战揭秘epub版本，作者梁瑞坤，详解vue2.0实战用法
B站尚硅谷---vue2实战项目《尚品汇》---第一天
m0_64804076的博客
11-30 739
B站尚硅谷---vue2实战项目《尚品汇》---第一天
Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day01
m0_55644132的博客
10-25 1282
vue2项目实战
vue项目实战(二)
Chen_Wei_Sheng的博客
11-30 434
在app.vue文件夹中的style区域 我们可以看到 常规的文字设置中是黑色加粗字体 但是里面有一个 router-link-exatc-active 表示的是此刻被选中的内容的样式设置 在这里就选择哪个文字 哪个文字就变成了薄荷绿。但是这个时候被选择的about文字 它的class类名变成了router-link-exact-active。发现在这个项目代码里面 有很多初始化的内容 我们的项目并不需要这些内容 所以我们要把它删了。
Vue2 —— 项目实战（电影网首页的制作） 附源码
Bonsoir777的博客
10-18 5791
本文主要介绍有关vue2 实战小demo的是实现过程。
vue2实践（持续更新）
weixin_34345753的博客
03-14 185
记录一些小技巧和踩过的坑 由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 <child1 ref="child1" msg="{name:'bill'}"></child1> <child1 ref="child1...
vue2(实战)
dingyu0064的博客
08-12 134
1.vue中引入插件 a、可以在index.html中直接引入；b.可以在main.js中require()/import; 2.css-loader在webpack2中配置loader不能省略： { test:/\.css$/, loader:'style-loader|css-loader' 顺序不能换 } 3.之前项目知识点 页面中引入css: ...
Vue2项目实战：尚品汇（一）项目基本框架、home首页模块
DogEgg_001的博客
09-16 843
项目开始前进行些配置有助于更好的完成项目--openlintOnSave: false, //关闭大小写提示。
Vue基础：实战待办列表组件与通信
本资源是一份基于Vue.js的基础待办事项列表案例教程，它旨在通过实战演示如何在前端开发中构建一个功能丰富的待办事项管理应用。以下是关键知识点的详细解析： 1. **页面动态渲染与数据管理**： 需求1强调了页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值