正文

手把手教你配置SSM+Vue项目，Nginx实战案例详解

/0 浏览量
1017

引言

随着互联网技术的不断发展，SSM（Spring、SpringMVC、MyBatis）框架和Vue前端框架已经成为开发企业级应用的热门选择。而Nginx作为高性能的Web服务器，在项目中也有着广泛的应用。本文将手把手教你如何配置SSM+Vue项目，并结合Nginx进行实战案例详解，让你轻松掌握项目部署技巧。

一、环境准备

在开始配置SSM+Vue项目之前，我们需要准备以下环境：

  1. Java开发环境：JDK 1.8及以上版本
  2. Maven：用于项目构建
  3. MySQL：用于数据库存储
  4. Node.js：用于Vue项目开发
  5. Nginx：用于Web服务器

二、SSM框架搭建

1. 创建Maven项目

  1. 打开Maven命令行工具，执行以下命令创建Maven项目：
mvn archetype:generate -DgroupId=com.example -DartifactId=ssm-vue-project -DarchetypeArtifactId=maven-archetype-quickstart
  1. 输入项目名称和描述，选择项目位置，完成创建。

2. 添加依赖

在pom.xml文件中添加以下依赖：

<dependencies>
    <!-- Spring -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>5.2.10.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.2.10.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>5.2.10.RELEASE</version>
    </dependency>
    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.5.6</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.6</version>
    </dependency>
    <!-- MySQL -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.22</version>
    </dependency>
    <!-- 其他依赖 -->
    <dependency>
        <groupId>org.aspectj</groupId>
        <artifactId>aspectjweaver</artifactId>
        <version>1.9.6</version>
    </dependency>
</dependencies>

3. 配置Spring和MyBatis

在src/main/resources目录下创建applicationContext.xml文件，配置Spring和MyBatis：

<?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"
       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">

    <!-- 扫描组件 -->
    <context:component-scan base-package="com.example.ssmvue"/>

    <!-- 数据源配置 -->
    <bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/your_database?useSSL=false"/>
        <property name="username" value="your_username"/>
        <property name="password" value="your_password"/>
    </bean>

    <!-- MyBatis配置 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="typeAliasesPackage" value="com.example.ssmvue.model"/>
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    </bean>

    <!-- 扫描Mapper接口 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.example.ssmvue.mapper"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>
</beans>

4. 创建Controller

在com.example.ssmvue.controller包下创建UserController.java文件，实现用户管理功能：

package com.example.ssmvue.controller;

import com.example.ssmvue.model.User;
import com.example.ssmvue.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/list")
    @ResponseBody
    public List<User> list() {
        return userService.findAll();
    }
}

三、Vue项目搭建

1. 创建Vue项目

  1. 打开命令行工具，执行以下命令创建Vue项目：
vue create vue-project
  1. 输入项目名称和描述，选择项目位置，完成创建。

2. 安装依赖

进入项目目录，安装Vue项目所需依赖：

cd vue-project
npm install axios vue-router

3. 创建Vue组件

在src/components目录下创建UserList.vue文件，实现用户列表展示：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/user/list');
        this.users = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

4. 配置路由

在src/router/index.js文件中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import UserList from '../components/UserList.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'UserList',
      component: UserList
    }
  ]
});

四、Nginx配置

1. 安装Nginx

  1. 打开命令行工具，执行以下命令安装Nginx：
sudo apt-get update
sudo apt-get install nginx
  1. 启动Nginx服务：
sudo systemctl start nginx

2. 配置Nginx

  1. 打开/etc/nginx/sites-available/default文件，修改以下内容：
server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
  1. 重载Nginx配置：
sudo systemctl reload nginx

3. 部署SSM项目

  1. 将SSM项目打包成war文件，并放置在/usr/share/nginx/html目录下。
  2. 重启Nginx服务，使配置生效。

五、总结

通过本文的讲解，你现在已经掌握了如何配置SSM+Vue项目，并结合Nginx进行实战案例详解。在实际开发过程中，你可以根据项目需求进行相应的调整和优化。希望本文对你有所帮助！

-- 展开阅读全文 --