0.准备工作_当0准备工作-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45717294/article/details/123930458

本文记录了一位编程爱好者利用Vue.js和SSM框架开发一个滑板社区网站的过程，包括前后端功能设计如滑板教学视频、滑板配置展示、地图标注等，并详细介绍了项目的搭建步骤和配置文件内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做这个东西的目的

本身非常喜欢滑板,又是学编程的,那么就在想,能不能搞一个前后端分离的项目记录自己滑板日常的网站给自己的小圈子玩一玩,将自己学到的东西都用上去(虽然学的不多,哈哈哈),于是就开始做了这个项目,起初的想法是,该社区的功能有:
1.滑板教学视频(从某站爬的视频),
2.展示别的滑手的滑板配置,给新手朋友推荐,
3.展示当下pro们的档案(各种爬数据),
4.集成某个地图,将附近指定的几公里内可以滑板的公园标注出来,
5.滑手个人档案: echarts饼图,让滑手掌握的trick更加直观, echarts树图,作为滑手的技能树,可以点亮,点击叶子节点就能上传该trick的视频,
6.登录注册修改密码功能,这里只是简单地实现了一下,并未用到shiro安全框架,打算在后续的移动端开发中进行使用

准备工作

前端
使用vue-cli搭建前端项目,首先我的前端环境如下,

那么就开始使用vue-cli搭建vue项目了, 参考网站,我只是照着这篇博客一步一步来的,于是前端就搭建完毕
页面的初步结构:

后端
后端使用SSM框架,那么就涉及到了SSM的整合
1. 首先创建maven项目
2. 整合SSM,这里使用基于XML的方式

①pom依赖

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.zhl</groupId>
  <artifactId>backCode</artifactId>
  <version>1</version>
  <packaging>war</packaging>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <!-- jsp依赖 -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2.1-b03</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.1</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.9</version>
    </dependency>
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.12</version>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.2</version>
    </dependency>
    <dependency>
      <groupId>org.apache.tomcat</groupId>
      <artifactId>tomcat-catalina</artifactId>
      <version>9.0.11</version>
    </dependency>
    <dependency>
      <groupId>org.junit.jupiter</groupId>
      <artifactId>junit-jupiter-api</artifactId>
      <version>RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.junit.jupiter</groupId>
      <artifactId>junit-jupiter-api</artifactId>
      <version>RELEASE</version>
    </dependency>

  </dependencies>


  <build>

    <resources>
      <resource>
        <!--所在的目录-->
        <directory>src/main/java</directory>
        <includes><!--包括目录下的.properties,.xml 文件都会扫描到-->
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
      </resource>
    </resources>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>


</project>

②spring配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd">

    <!--注册组件扫描器-->
    <context:component-scan base-package="com.zhl.service"/>


    <!--引入属性配置文件-->
    <context:property-placeholder location="classpath:config/jdbc.properties"/>

    <!--配置阿里的Druid数据库连接池-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

    <!--注册sqlSessionFactoryBean-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:config/mybatis.xml"/>
    </bean>

    <!--动态代理对象-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <property name="basePackage" value="com.zhl.dao" />
    </bean>

</beans>

③ springMVC配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--springmvc配置文件-->

    <!--注册组件扫描器
        base-package: 指定@Controller注解所在的包
     -->
    <context:component-scan base-package="com.zhl.controller" />

    <!--注册注解驱动-->
    <mvc:annotation-driven />

    <!--指定视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--前缀和后缀-->
        <property name="prefix" value="/WEB-INF/view/" />
        <property name="suffix" value=".jsp" />
    </bean>

</beans>

④mybatis配置文件

<configuration>

    <!--日志-->
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>

    <typeAliases>
        <package name="com.zhl.entity"/>
    </typeAliases>
    
    <mappers>
        <package name="com.zhl.dao"/>
    </mappers>

</configuration>

⑤ 配置文件,存放数据库的相关配置信息,一开始是本地开发,后来购买了云服务器以后,将前端部署到nginx上,后端部署到tomcat上,开放3306端口作为数据库,所以url和username不用变,变得是密码,因为我使用的是宝塔Linux面板安装的mysql,默认用户名是root,但是它会生成mysql密码,那么将其复制过来修改配置文件即可,当然也可以修改成自己想要的密码,我就没改了

jdbc.url=jdbc:mysql://localhost:3306/SKfF?characterEncoding=UTF-8
jdbc.username=root
jdbc.password=***********  // 保护