SpringBoot-Vue项目初始搭建

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);
    }
    })
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Azure Machine Learning - 在 Azure 门户中创建AI搜索技能组

Azure Machine Learning - 在 Azure 门户中创建AI搜索技能组

你将了解 Azure AI 搜索中的技能组如何通过添加光学字符识别 (OCR)、图像分析、语言检测、文本翻译和实体识别&#xff0c;在搜索索引中创建可搜索文本的内容。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff…
阅读更多...
使用dlib简单进行人脸特征点检测和换脸

使用dlib简单进行人脸特征点检测和换脸

0.出于好奇,思考中想要把2维图像怎么转化为3维图像,我在考虑怎么把草莓二维转为三维图像,这个领域其实早有人研究了,术语叫三维重建,使用matlab可以实现三维坐标标点来表达,后来我发现一个很好玩的事情就是我看到直播有人卖替换人脸和换装的程序,我就想试试怎么实现换脸… //ma…
阅读更多...
Springboot3+vue3从0到1开发实战项目（二）

Springboot3+vue3从0到1开发实战项目（二）

前面完成了注册功能这次就来写登录功能&#xff0c; 还是按照这个方式来 明确需求&#xff1a; 登录接口 前置工作 &#xff1a; 想象一下登录界面&#xff08;随便在百度上找一张&#xff09; 看前端的能力咋样了&#xff0c; 现在我们不管后端看要什么参数就好 阅读接口文档…
阅读更多...
最小生成树（Minimum Spanning Tree）及生成MST的几种方法

最小生成树（Minimum Spanning Tree）及生成MST的几种方法

最小生成树 (Minimum Spanning Tree) 最小生成树是图论领域的一个基本概念&#xff0c;适用于加权连通图&#xff0c;其中包括若干顶点&#xff08;节点&#xff09;以及连接这些顶点的边&#xff08;边可以有权重&#xff09;。在一个加权连通图中&#xff0c;生成树&#xf…
阅读更多...
MSTP实验

MSTP实验

目录 一、实验拓扑 二、实验要求 三、实验步骤 1、创建vlan 2、创建端口组&#xff0c;放通vlan 3、配置MSTP 4、配置主备奋根 一、实验拓扑 二、实验要求 1、所有交换机上创建vlan10&#xff0c;vlan20&#xff0c;vlan30和vlan40 2、所有交换机之间的端口配置为Trunk…
阅读更多...
wordpress忘记密码怎么办？

wordpress忘记密码怎么办？

有的时候&#xff0c;我们会忘记网站的密码&#xff0c;所以网站的密码要记住&#xff0c;那记不住&#xff0c;怎么样才可以登录后台呢&#xff1f;下面来给大家说一下方法&#xff0c;第一种方法&#xff0c;就是进入数据库里面修改密码&#xff0c;第二种就是从新搭建&#…
阅读更多...
windows系统mobaxterm远程执行linux上ssh命令

windows系统mobaxterm远程执行linux上ssh命令

命令如下 start "" "%~dp0\MobaXterm_Personal_23.4.exe" -newtab "sshpass -p root ssh root192.168.11.92 mkdir 33" -p 是密码 左边是用户名&#xff0c;右边是服务器ip 后面跟的是服务器上执行的命令 第一次执行的时候要设置mobaxt…
阅读更多...
SQL Server 2016（基本概念和命令）

SQL Server 2016（基本概念和命令）

1、文件类型。 【1】主数据文件&#xff1a;数据库的启动信息。扩展名为".mdf"。 【2】次要&#xff08;辅助&#xff09;数据文件&#xff1a;主数据之外的数据都是次要数据文件。扩展名为".ndf"。 【3】事务日志文件&#xff1a;包含恢复数据库的所有事务…
阅读更多...
LeetCode 2661. 找出叠涂元素：多次映射

LeetCode 2661. 找出叠涂元素：多次映射

【LetMeFly】2661.找出叠涂元素&#xff1a;多次映射 力扣题目链接&#xff1a;https://leetcode.cn/problems/first-completely-painted-row-or-column/ 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。arr 和 mat 都包含范围 [1&#xff0c;m * n] 内…
阅读更多...
服务注册发现 配置中心 springcloud alibaba nacos

服务注册发现 配置中心 springcloud alibaba nacos

文章目录 0100 系统环境0200 nacos安装0201 下载0202 安装 0300 工程说明0301 结构说明0302 运行效果 0400 代码说明0401 服务提供者&#xff08;Provider Service&#xff09;0402 服务消费者&#xff08;Consumer Service&#xff09;服务提供者SDK&#xff08;Provider Serv…
阅读更多...
阿里云服务器跨区域迁移（多数据盘）

阿里云服务器跨区域迁移（多数据盘）

方法一. 复制镜像&#xff0c;共享镜像&#xff08;只有系统盘没有数据盘的情况&#xff01;&#xff09; 正常阿里云同区域服务器迁移只需要选择共享镜像即可&#xff0c;但是由于新老服务器区域限制所以需要先复制到新服务器区域再进行共享 选择服务器实例先创建后复制 比如…
阅读更多...
1145. 北极通讯网络（Kruskal,并查集维护）

1145. 北极通讯网络（Kruskal,并查集维护）

1145. 北极通讯网络 - AcWing题库 北极的某区域共有 n 座村庄&#xff0c;每座村庄的坐标用一对整数 (x,y) 表示。 为了加强联系&#xff0c;决定在村庄之间建立通讯网络&#xff0c;使每两座村庄之间都可以直接或间接通讯。 通讯工具可以是无线电收发机&#xff0c;也可以是…
阅读更多...
基于SpringBoot的仓库管理系统设计与实现附带源码和论文

基于SpringBoot的仓库管理系统设计与实现附带源码和论文

博主24h在线&#xff0c;想要源码文档部署视频直接私聊&#xff0c;全网最低价&#xff0c;9.9拿走&#xff01; 【关键词】仓库管理系统&#xff0c;jsp编程技术&#xff0c;mysql数据库&#xff0c;SSM&#xff0c;Springboot 目 录 摘 要 Abstract 第1章 绪论 1.1 课题…
阅读更多...
shell编程系列(10)-使用paste拼接列

shell编程系列(10)-使用paste拼接列

使用paste拼接列 前言使用paste拼接列拼接两个文件 结语 前言 在前面的文章中讲解了使用cut命令选择列&#xff0c;这篇文章我们介绍使用paste命令拼接列&#xff0c;其实这个命令的使用场景很有限&#xff0c;做科研的同学可能才会用到&#xff0c;但是却非常好用&#xff0c…
阅读更多...
使用凌鲨进行内网穿透

使用凌鲨进行内网穿透

为了方便在本地进行开发和调试工作&#xff0c;有时候需要安全地连接内网或Kubernetes集群中的服务。 在net proxy server中可以限制访问用户&#xff0c;也可以设置端口转发的密码。 使用 连接端口转发服务 列出可转发端口 可转发端口是服务端设置的&#xff0c;不会暴露真…
阅读更多...
Linux 基础认识

Linux 基础认识

文章目录 前言Linux历史window历史Linux地位发行版本 前言 建议只看概述 Linux历史 概述&#xff1a; 由一个研究生受Minix操作系统启发编写的&#xff0c;因为功能实用&#xff0c;代码开源被世界人接收和开发 &#xff0c;最终正式发布 。 详情&#xff1a; 1991年10月5日…
阅读更多...
12.2_黑马Redis实战篇达人探店好友关注

12.2_黑马Redis实战篇达人探店好友关注

目录 实战篇03 thinking &#xff1a;提取公共部分为一个方法的快捷键&#xff1f; thinking&#xff1a;redis中的ismember&#xff1f; thinking:BooleanUtil.isTrue? 实战篇04 thinking&#xff1a;zscore的用法&#xff1f; thinking&#xff1a;stream().map().co…
阅读更多...
centos7 yum安装redis

centos7 yum安装redis

1.安装epel源 yum install epel-release -y 2.安装 参数-y是遇到yes/no时 自动yes yum install redis -y 3.查看redis安装的位置 whereis redis 4.打开配置文件 vim /etc/redis.config 5.修改密码 在打开的文件中输入 /requirepass 后按下确认键&#xff0c;(找下一个关…
阅读更多...
JVM虚拟机：JVM参数之标配参数

JVM虚拟机：JVM参数之标配参数

本文重点 本文我们将学习JVM中的标配参数 标配参数 从jdk刚开始就有的参数&#xff0c;比如&#xff1a; -version -help -showversion
阅读更多...
[笔记]dubbo发送接收

[笔记]dubbo发送接收

公司需要使用java技术栈接入一套自定义的通讯协议&#xff0c;所以参考下dubbo的实现原理。 consumer 主要使用ThreadlessExecutor实现全consumer的全双工通讯。consumer创建本次请求的requestId用于将response和request匹配。 然后分以下几步完成一次请求发送并接收结果&…
阅读更多...
最新文章

Copyright @ 2022~2023