SSM+HTML搭建(小白教学)

Love The Way You Lie 2023-10-04 22:02 23阅读 0赞

最近做项目,觉得还是有意义记录以下前后端框架是怎么搭建的,今天给大家介绍介绍

SSM:SpringBoot+SpringMVC+MyBatis

#### 后端搭建: ####

*  SpringBoot快速搭建的网站([Spring Initializr][])

![d91820a6fca2b94e11c85edbfef36786.png][]

选择创建之后,会下载到一个zip压缩包,对压缩包进行解压(包地址一般选择后端项目的放的文件夹中)

*  用idea打开项目,并配置依赖

在项目中会用到SpringBoot、SpringMvc、mysql、lombok、MyBatis、maven

在pom.xml中导入依赖：

<?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.6</version>
            <relativePath/> 
        </parent>
        <groupId>com.example</groupId>
        <artifactId>meeting</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>meeting</name>
        <description>Demo project for Spring Boot</description>
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-jdbc</artifactId>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>8.0.16</version>
            </dependency>
            <dependency>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-core</artifactId>
                <version>1.4.0</version>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.18.12</version>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>8.0.16</version>
            </dependency>
            <dependency>
                <groupId>com.auth0</groupId>
                <artifactId>java-jwt</artifactId>
                <version>3.8.2</version>
            </dependency>
            <dependency>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-core</artifactId>
                <version>1.4.0</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-aop</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.4</version>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>1.1.10</version>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>

在Springboot中如果出现出现编译错误，记得在Maven中进行清除和重新编译

![6da1138a8a18c2fef23e240e681fa0bd.png][]

*  Springboot配置

在resources文件中创建application.xml文件夹，然后在这个文件中对Spriongoot进行配置

#定义后端端口号
    server:
      port: 8080

#spring
    spring:
      datasource:
        url: jdbc:mysql://127.0.0.1:3306/meet?serverTimezone=Asia/Shanghai#数据库地址
        username: root#数据库账号
        password: root#数据库密码
        driver-class-name: com.mysql.cj.jdbc.Driver
        type: com.alibaba.druid.pool.DruidDataSource
        initialSize: 5  #初始化时建立物理连接的个数   数据库连接池相关的配置
        minIdle: 1 #最小连接池数量
        maxActive: 20#最大活跃量

main:
        allow-circular-references: true #循环依赖开启
      mvc:
        pathmatch:
          matching-strategy: ant_path_matcher
      #jackson:
        #date-format: yyyy-MM-dd HH:mm:ss
        #time-zone: GMT+8
        #和实体类中的注解功能相同 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")

#mybatis
    mybatis:
      type-aliases-package: com.example.meeting.model#mapper文件中的全类名
      mapper-locations: classpath:mappers/*Mappers.xml#扫描映射mappers的地址
      configuration: #mybatis settings配置
        map-underscore-to-camel-case: true #开启自动映射
        cache-enabled: true

*  三层架构

1.  Dao层（对数据库操作的方法 接口 ）

注解：@Repository

1.  Service层(对业务进行操作)

注解：@Service

@Transactional

1.  Crotroller层（前后端进行数据交互）

注解：@RestController

@RequestMapping("地址")

1.  model类（自己定义的实体类）

注解：@Component

@Data

@Setter

@Getter

1.  启动类(启动项目)

@MapperScan（“扫描dao层的地址”）

@SpringBootApplication

后端编码格式：

![78eab0cff1942f934c495aaee0019df9.png][]

*  在resources文件中创建一个mapper目录，在里面写../Mappers.xml文件，用于启动类启动时进行扫描，对数据库进行操作

#### 前端搭建： ####

*  搭建一个前端项目

![9d1eae0b9543457be7089c08420bf89c.png][]

*  安装组件

1.  npm i vue-router@3.5.3 //路由管理器组件

1.  npm i element -ui S//桌面端组件库

1.  npm install axios//HTTP网络端的请求库

*  配置index.js

![07127c588e7f69c3f892d56eb41475aa.png][]

import Vue from 'vue';
    import router from 'vue-router';/* 导入路由 */
    import Login from '../Login.vue';/* 导入其他组件 */
    import Main from '../Main.vue';/* 导入其他组件 */
    
    Vue.use(router);
    var rout = new router({
    routes: [
    {
    path: '/login',//路由地址
    name: 'Login',
    component: Login//组件名
    },
    {
    path: '/main',
    name: 'Main',
    component: Main,
    children:[
       //子组件 
    },
    ]
    }
    );
    
    //添加路由导航守卫,每次发生路由时触发,to.path你要去的页面
    rout.beforeEach((to,from,next)=>{
    if(to.path=="/login"||to.path=="/userlogin"||to.path=="/userrigin"){//如果用户访问的登录页，直接放行
    return next();
    }else{
    //给浏览器缓存account
    var account =sessionStorage.getItem("account");
    if(account==null){
    return next("/userlogin");
    }else{
     return next();//已经登录
    }
    }
    })
    //导出路由对象
    export default rout;

*  配置main.js

//main.js是项目核心配置文件
    //导入vue.js
    import Vue from 'vue'
    //导入一个默认的组件
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
     //导入路由组件   ./表示当前目录
    import router from "./router/index.js";
    Vue.use(router);
    
    //导入ElementUI框架, 会导入ElementUI中所有的组件
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    
    //导入 axios
    import axios from 'axios';
    //设置访问后台服务器地址
    axios.defaults.baseURL="http://localhost:8080/";//前端响应后端设置的URL
    //将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
    Vue.prototype.$http=axios;
    //axios 请求拦截
    axios.interceptors.request.use(config =>{
    //为请求头对象，添加 Token 验证的 token 字段
    config.headers.adminToken =sessionStorage.getItem('adminToken');//接收adminToken
    config.headers.userToken =sessionStorage.getItem('userToken');//接收userToken
    return config;
    })
    // 添加响应拦截器
    axios.interceptors.response.use((resp) =>{//正常响应拦截
    if(resp.data.code==500){
    ElementUI.Message({message:resp.data.message,type:"error"})
    }
    if(resp.data.code==202){
    sessionStorage.clear();
    router.replace("/userlogin");
    }
    return resp;
    });
    
    //创建项目中唯一的一个vue对象
    new Vue({
      render: h => h(App),  //默认将app.vue组件加载到唯一的index.html中的<div id="app">div上面,
      router,
    }).$mount('#app')

*  配置App.vue

<<template>
      <div id="app">
          
          <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    /* 导出组件,并为组件定义数据,函数,生命周期函数 */
     export default{
         data(){
             return{
            
             }
         }
     }
    </script>
    
    <style>
    
    </style>

在前端向后端申请请求的时候，会出现跨域的问题，以至于前端和后端不能正常连接，在这里的话，我们就有必要在后端进行设置一个过滤器，代码如下：

package com.example.meeting.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;
    
    import java.util.Collections;
    
    @Configuration
    public class CorsConfig {
    
        @Bean
        public CorsFilter corsFilter() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            //1,允许任何来源
            corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
            //2,允许任何请求头
            corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
            //3,允许任何方法
            corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
            //4,允许凭证
            corsConfiguration.setAllowCredentials(true);
    
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", corsConfiguration);
            return new CorsFilter(source);
        }
    }

下面提供以下最近做的一个签到项目，供大家参考（代码稍微有点多！！！！）：

本次项目的（[后端代码][Link 1]），（[前端代码][Link 2]）

[Spring Initializr]: https://start.spring.io/
[d91820a6fca2b94e11c85edbfef36786.png]: https://img-blog.csdnimg.cn/img_convert/d91820a6fca2b94e11c85edbfef36786.png
[6da1138a8a18c2fef23e240e681fa0bd.png]: https://img-blog.csdnimg.cn/img_convert/6da1138a8a18c2fef23e240e681fa0bd.png
[78eab0cff1942f934c495aaee0019df9.png]: https://img-blog.csdnimg.cn/img_convert/78eab0cff1942f934c495aaee0019df9.png
[9d1eae0b9543457be7089c08420bf89c.png]: https://img-blog.csdnimg.cn/img_convert/9d1eae0b9543457be7089c08420bf89c.png
[07127c588e7f69c3f892d56eb41475aa.png]: https://img-blog.csdnimg.cn/img_convert/07127c588e7f69c3f892d56eb41475aa.png
[Link 1]: https://download.csdn.net/download/dfdbb6b/87491475
[Link 2]: https://download.csdn.net/download/dfdbb6b/87491454