SpringBoot-Vue项目初始搭建

news2025/7/19 1:02:11

SpringBoot-Vue项目初始搭建

1、项目搭建

前提：配置过nodejs环境，安装了vue@cli（如果未配置，可以参照此教程：https://www.bilibili.com/video/BV18E411a7mC/ p12）

新建文件夹(最好不要有中文)

打开cmd

vue create vue

创建vue项目

image-20221015212631586

选择自己需要的配置（空格选择，回车下一步）

image-20221015212728580

选择vue版本

image-20221015212813950

目前（2022-10）vue3很多问题还需要自己想办法解决，推荐vue2

image-20221015213112712

创建完成！

image-20221015220947213

测试一下

cd vue
npm run serve

image-20221015221036232

访问localhost:8080

（注意，如果当时8080端口正在被占用，端口会自动切换）

image-20221015221104285

搭建完成！

2、初始化项目

用Idea打开项目

安装Element-ui（注意路径）

npm i element-ui -S

image-20221015222816714

在main.js下集成ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

image-20221015223124431

优化App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

优化HomeView.vue

增加一个按钮测试ElementUi引入是否正常

<template>
  <div>
    <el-button type="primary">按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'HomeView'
}
</script>

在Idea中配置vue启动

image-20221015223730974

启动项目

访问localhost:8080测试修改

image-20221015223834802

发现我们引入的按钮已经生效了！

按钮左侧距离边框明显还有一些留白

定义一些全局的css

body {
    margin: 0;
    padding: 0;
    background-color: #eee;
}

* {
    box-sizing: border-box;
}

image-20221015224237540

在main.js中引入

import './assets/global.css';

重新访问8080

image-20221015224549408

可以看到按钮已经与页面无间距了

3、主体布局

这个就是我们的大概布局了

image-20221016120044414

我们要实现的是在点击侧边栏进行功能切换时头部和侧边栏不发生变化，Main区域发生变化

去找一个好看的logo

https://www.iconfont.cn/

复制到assets目录下替换原来的logo

image-20221016121342752

修改App.vue

<template>
  <div id="app">

    <!--头部区域-->
    <div style="height: 60px; line-height: 60px; background-color: white; margin-bottom: 2px">
      <img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 10px; left: 20px">
      <span style="margin-left: 25px; font-size: 24px">图书管理系统</span>
    </div>

    <!--侧边栏和主体-->
    <div style="display: flex">

      <!--左侧侧边栏导航-->
      <div style="width: 200px; min-height: calc(100vh - 62px); overflow: hidden; margin-right: 2px; background-color: white">
        <el-menu :default-active="$route.path" :default-openeds="['/']" router class="el-menu-demo">
          <el-menu-item index="/">
            <i class="el-icon-eleme"></i>
            <span>首页</span>
          </el-menu-item>
          <el-submenu index="/">
            <template slot="title">
              <i class="el-icon-question"></i>
              <span>关于页面</span>
            </template>
            <el-menu-item index="about">
              <span>关于详情</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <!--右侧数据的展示-->
      <div style="flex: 1; background-color: white; padding: 10px">
        <!--展示我们路由显示的界面-->
        <router-view/>
      </div>
    </div>

  </div>
</template>

修改HomeView.vue

<template>
  <div>
    <!--搜索框-->
    <div>
      <el-input style="width: 240px" placeholder="请输入名称"></el-input>
      <el-input style="width: 240px; margin-left: 5px" placeholder="请输入联系方式"></el-input>
      <el-button style="margin-left: 5px" type="primary"><i class="el-icon-search"></i>搜索</el-button>
    </div>
    <!--数据-->
    <el-table :data="tableData" stripe>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
    </el-table>
    <!--分页-->
    <div style="margin-top: 20px">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="5"
          :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>


export default {
  name: 'HomeView',
  data() {
    return {
      tableData: [
        {name: "张三", age: 20, address: "沈阳市", phone: "13066586531", sex: '男'},
        {name: "张三", age: 20, address: "沈阳市", phone: "13066586531", sex: '男'},
        {name: "张三", age: 20, address: "沈阳市", phone: "13066586531", sex: '女'},
      ]
    }
  }
}
</script>

如果觉得搜索框太大，可以在main.js里可以设置引入的ElementUI的大小

Vue.use(ElementUI,{size: 'small'});  //medium，small，mini

4、后台服务搭建

新建springboot项目，勾选web，mysql，mybatis，lombok，dev-tools依赖

在数据库中新建表

CREATE TABLE `user` (
	`id` INT ( 11 ) NOT NULL AUTO_INCREMENT,
	`name` VARCHAR ( 255 ) DEFAULT NULL COMMENT '姓名',
	`username` VARCHAR ( 255 ) DEFAULT NULL COMMENT '用户名',
	`age` INT ( 4 ) DEFAULT NULL COMMENT '年龄',
	`sex` VARCHAR ( 1 ) DEFAULT NULL COMMENT '性别',
	`phone` VARCHAR ( 255 ) DEFAULT NULL COMMENT '联系方式',
	`address` VARCHAR ( 255 ) DEFAULT NULL COMMENT '住址',
PRIMARY KEY ( `id` ) 
) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;

修改springboot配置文件

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/library-management?serverTimeZone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8
    username: root
    password: root

server:
  port: 9090

解决跨域问题！

第一种方式：

在controller层的类中加上@CrossOrigin注解

image-20221018221131258

第二种方式：

在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 {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public 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);
    }
}

在Resouces目录下新建mapper文件夹

新建UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zwj.mapper.UserMapper">


</mapper>

在application.yml文件中添加以下部分

mybatis:
  mapper-locations:
    - classpath:mapper/*.xml
  type-aliases-package: com.zwj.pojo

logging:
  level:
    com.zwj.mapper: debug

5、实现分页、模糊查询

编写后端工具类Result，统一返回格式

package com.zwj.utils;

import lombok.Data;

@Data
public class Result {

    private static final String SUCCESS_CODE = "200";
    private static final String ERROR_CODE = "-1";

    private String code;
    private String msg;
    private Object data;

    public static Result success(){
        Result result = new Result();
        result.setCode(SUCCESS_CODE);
        return result;
    }

    public static Result success(Object data){
        Result result = new Result();
        result.setCode(SUCCESS_CODE);
        result.setData(data);
        return result;
    }

    public static Result ERROR(String msg){
        Result result = new Result();
        result.setCode(ERROR_CODE);
        result.setMsg(msg);
        return result;
    }

}

修改/user/list方法和返回结果，这样在写其他类的CRUD时方便复制

@GetMapping("/list")
public Result listUsers(){
    return Result.success(userService.getUsers());
}

引入pagehelper插件

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.1</version>
</dependency>

构建分页基类

@Data
class BaseRequest {
    private Integer pageNum = 1;
    private Integer pageSize = 10;
}

list查询类

@Data
public class UserPageRequest extends BaseRequest{
    private String name;
    private String phone;
}

接口实现类

@GetMapping("/page")
public Result page(UserPageRequest userPageRequest){
    return Result.success(userService.page(userPageRequest));
}

@Mapper
Object page(UserPageRequest userPageRequest);

@Override
public Object page(UserPageRequest userPageRequest) {
    PageHelper.startPage(userPageRequest.getPageNum(),userPageRequest.getPageSize());
    List<User> users = userMapper.listByCondition(userPageRequest);
    return new PageInfo<>(users);
}

动态sql

<select id="listByCondition" resultType="user">
    select * from user
    <where>
        <if test="name != null and name != ''">
            name like concat('%',#{ name },'%')
        </if>
        <if test="phone != null and phone != ''">
            phone like concat('%',#{ phone },'%')
        </if>
    </where>
</select>

安装axios

cd vue
npm i axios -S

封装request

import axios from 'axios'

const request = axios.create({
    baseURL: 'http://localhost:9090',
    timeout: 5000
});

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

// config.headers['token'] = user.token;  // 设置请求头

return config;
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
    let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
    return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
    res = res ? JSON.parse(res) : res
}
return res;
},
error => {
    console.log('err' + error);
    return Promise.reject(error);
}
);


export default request

请求接口

load() {
    request.get("/user/page", { params: this.params }).then(res => {
    console.log(res);
    if (res.code === '200'){
    	this.tableData = res.data.list;
    	this.total = res.data.total;
    } else {
    	alert(res.msg);
    }
    })
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1278711.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AirServer怎么用?如何AirServer进行手机投屏

AirServer怎么用?如何AirServer进行手机投屏

什么是 AirServer&#xff1f; AirServer 是适用于 Mac 和 PC 的先进的屏幕镜像接收器。 它允许您接收 AirPlay 和 Google Cast 流&#xff0c;类似于 Apple TV 或 Chromecast 设备。AirServer 可以将一个简单的大屏幕或投影仪变成一个通用的屏幕镜像接收器 &#xff0c;是一款…
阅读更多...
C语言实现猜数字游戏

C语言实现猜数字游戏

前面我们已经了解了分支循环、数据类型及变量的知识点&#xff0c;今天我将用之前学过的知识进行实操&#xff0c;将所学的知识进行巩固和提升。下面的讲解仅我个人认知水平&#xff0c;如有欠缺之处&#xff0c;欢迎大家指正&#xff0c;并且我希望初学者在看完讲解后可以独立…
阅读更多...
汇编语言实现音乐播放器

汇编语言实现音乐播放器

目标程序 用汇编语言实现一个音乐播放器&#xff0c;并支持点歌 Overview 乐曲是按照一定的高低、长短和强弱关系组成的音调&#xff0c;在一首乐曲中&#xff0c;每个音符的音高和音长与频率和节拍有关&#xff0c;因此我们要分别为3首要演奏的乐曲定义一个频率表和一个节拍…
阅读更多...
生成带依赖Jar 包的两种常用方式：IDEA打包工具：Artifacts 和 maven-shade-plugin

生成带依赖Jar 包的两种常用方式：IDEA打包工具：Artifacts 和 maven-shade-plugin

文章目录 前言1、IDEA打包工具&#xff1a;Artifacts1.1 创建Artifacts1.2 选择第三方jar文件1.3 打包Artifacts1.4 测试jar包 2、maven-shade-plugin2.1、pom文件添加2.2、打包2.3、测试jar包 总结 前言 当我们编写完Java程序后&#xff0c;为了提高执行效率通常会将应用程序…
阅读更多...
MySQL5.7安装与配置：自动化一键安装配置

MySQL5.7安装与配置：自动化一键安装配置

介绍 本文介绍了一个自动化安装MySQL的Shell脚本。该脚本可以帮助用户快速安装MySQL&#xff0c;并自动进行配置和初始化。通过使用该脚本&#xff0c;用户无需手动执行繁琐的安装步骤&#xff0c;大大简化了MySQL的安装过程。 使用shell自动化安装教程 1. 复制脚本 首先&a…
阅读更多...
flink源码分析之功能组件(四)-slot管理组件II

flink源码分析之功能组件(四)-slot管理组件II

简介 本系列是flink源码分析的第二个系列&#xff0c;上一个《flink源码分析之集群与资源》分析集群与资源&#xff0c;本系列分析功能组件&#xff0c;kubeclient&#xff0c;rpc&#xff0c;心跳&#xff0c;高可用&#xff0c;slotpool&#xff0c;rest&#xff0c;metrics&…
阅读更多...
零基础打靶—CTF4靶场

零基础打靶—CTF4靶场

一、打靶的主要五大步骤 1.确定目标&#xff1a;在所有的靶场中&#xff0c;确定目标就是使用nmap进行ip扫描&#xff0c;确定ip即为目标&#xff0c;其他实战中确定目标的方式包括nmap进行扫描&#xff0c;但不局限于这个nmap。 2.常见的信息收集&#xff1a;比如平常挖洞使用…
阅读更多...
哈夫曼树与并查集

哈夫曼树与并查集

带权路径长度&#xff1a; 哈夫曼树定义&#xff1a; 哈夫曼树的构造&#xff1a; 哈夫曼编码&#xff1a; 并查集&#xff1a; 代码实现&#xff1a;​​​​​​​ 优化&#xff1a;​​​​​​​
阅读更多...
ftp的服务安装配置

ftp的服务安装配置

安装 yum install -y vsftpd # 是否安装成功 rpm -qa | grep vsftpd # 是否开机启动 systemctl list-unit-files | grep vsftpd # 开机启动 systemctl enable vsftpd.service # ftp端口 netstat -antup | grep ftp # 状态 service vsftpd status service vsftpd start service…
阅读更多...
mybatis多表查询（xml）

mybatis多表查询（xml）

多表查询都用resultMap resultMap 说白了就是他可以手动设置映射参数&#xff0c;例如 可以指定 column代表数据库的参数 property 代表实体类的参数 <id column"roleid" property"id"></id> column代表数据库的参数 property 代表实体类…
阅读更多...
融合CFPNet的EVC-Block改进YOLO的太阳能电池板缺陷检测系统

融合CFPNet的EVC-Block改进YOLO的太阳能电池板缺陷检测系统

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义 随着太阳能电池板的广泛应用&#xff0c;对其质量和性能的要求也越来越高。然而&#xff0c;由于生产过程中的各种因素&#xff0c;太阳能电池板上可能存在各种缺…
阅读更多...
人工智能和网络安全：坏与好

人工智能和网络安全：坏与好

人工智能似乎可以并且已经被用来帮助网络犯罪和网络攻击的各个方面。 人工智能可以用来令人信服地模仿真人的声音。人工智能工具可以帮助诈骗者制作更好、语法正确的网络钓鱼消息&#xff08;而糟糕的语法往往会暴露出漏洞&#xff09;&#xff0c;并将其翻译成多种语言&…
阅读更多...
Mongodb安装及其使用

Mongodb安装及其使用

1.Linux系统上安装Mongodb 在usr/local文件夹下创建mongo文件夹 下载mongodb包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-6.0.5.tgz解压mongodb tar -zxvf mongodb-linux-x86_64-rhel70-6.0.5.tgz更改文件夹的名字 mv mongodb-linux-x86_64-rh…
阅读更多...
卷积神经网络-3D医疗影像识别

卷积神经网络-3D医疗影像识别

文章目录 一、前言二、前期工作1. 介绍2. 加载和预处理数据 二、构建训练和验证集三、数据增强四、数据可视化五、构建3D卷积神经网络模型六、训练模型七、可视化模型性能八、对单次 CT 扫描进行预测 一、前言 我的环境&#xff1a; 语言环境&#xff1a;Python3.6.5编译器&a…
阅读更多...
css中的 Grid 布局

css中的 Grid 布局

flex布局和grid布局区别 flex布局是 一维布局grid布局是二维布局 flex布局示例 grid布局示例 grid 布局初体验 体验地址 <div class"wrapper"><div class"one item">One</div><div class"two item">Two</div&…
阅读更多...
【中文编码】利用bert-base-chinese中的Tokenizer实现中文编码嵌入

【中文编码】利用bert-base-chinese中的Tokenizer实现中文编码嵌入

最近接触文本处理&#xff0c;查询了一些资料&#xff0c;记录一下中文文本编码的处理方法吧。   先下载模型和词表&#xff1a;bert-base-chinese镜像下载   如下图示&#xff0c;下载好的以下文件均存放在 bert-base-chinese 文件夹下    1. 词编码嵌入简介 按我通俗的…
阅读更多...
笔记-基于CH579M模块通过网线直连电脑进行数据收发(无需网络)

笔记-基于CH579M模块通过网线直连电脑进行数据收发(无需网络)

刚学习&#xff0c;做个记录。 基于CH579M模块通过网线直连电脑进行数据收发(无需网络) 目录 一、工具1、CH579模块2、 网线3、电脑以及网络调试工具 二、操作步骤1、TCP/UDP等程序下载以及设置以太网IP2、网络断开3、检查以太网是否正常显示并稳定4、打开网络调试助手进行测试…
阅读更多...
揭秘原型链：探索 JavaScript 面向对象编程的核心（下）

揭秘原型链：探索 JavaScript 面向对象编程的核心（下）

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
Swin Transformer实战图像分类(Windows下，无需用到Conda，亲测有效)

Swin Transformer实战图像分类(Windows下，无需用到Conda，亲测有效)

目录 前言 一、从官网拿到源码&#xff0c;然后配置自己缺少的环境。 针对可能遇到的错误&#xff1a; 二、数据集获取与处理 2.1 数据集下载 2.2 数据集处理 三、下载预训练权重 四、修改部分参数配置 4.1 修改config.py 4.2 修改build.py 4.3 修改units.py 4.4 修…
阅读更多...
【程序设计】简易生产者、消费者模型

【程序设计】简易生产者、消费者模型

需求&#xff1a; 创建消息队列时需要指定队列的容量上限&#xff0c;队列中没有消息时&#xff0c;消费者从队列中take元素会阻塞&#xff1b;队列中的消息数量达到容量上限时&#xff0c;生产者往队列中put元素会阻塞。要保证线程安全。 组成&#xff1a; &#xff08;1&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023