发布时间：2025-06-24 20:26:43  作者：北方职教升学中心  阅读量：227

配置项目的名称、RabbitSystemVueApp.vue，这里就相当于一个组件，把其他页面加载到这里面（这里有点强迫症了，为了保留原来的 vue8080 页面，这里单独建了一个）

<template>  <router-view >  </router-view> <!-- 渲染匹配的路由组件 --></template><script></script><style scoped></style>

18、使用@Data注解代替get/set方法（下面的那些就可以删掉了），我这里是单独建了一个查询用的类，因为有时候联查的时候字段是不止一个表的，所以之后查用户信息就直接用这个类，缺什么字段就补什么，不会乱

13、快捷生成实体类，右击数据库的表

选择生成的包下就可以了

11、后端创建

三、service（业务层）、New Project 开始创建新项目

2、跳转后端用的customer.js

import axios from 'axios'; // 导入 axios 库，用于发起 HTTP 请求// 创建 axios 实例const instance = axios.create({    baseURL: 'http://localhost:8081', // 设置请求的基础 URL    timeout: 10000, // 请求超时时间（毫秒）});// 定义一个异步函数，用于获取客户数据export async function selCustomersJs() {    try {        // 发起 GET 请求，获取客户数据        const response = await instance.get('/CustomerController/selCustomers', {            headers: {                'Content-Type': 'application/json', // 设置请求头的内容类型为 JSON                'Authorization': 'Bearer YOUR_TOKEN' // 如果需要授权，设置 Bearer Token（请替换 YOUR_TOKEN 为实际的 Token）            }        });        // 返回响应的数据        return response.data;    } catch (error) {        // 捕获并处理请求错误        console.error('Error fetching customers:', error); // 打印错误信息到控制台        throw error; // 重新抛出错误，以便调用者可以进一步处理    }}

16、后端创建

1、前端创建

一、在 Vue 组件中使用axios或fetch发送 HTTP 请求。检测一下vue是否安装好了，直接查看vue的版本，正常出来的话就没问题

2、关闭的时候，按 Ctrl + C ，然后输入 Y 回车就好了，关闭之后刚才的网页就打不开了，接下来就可以写前端的代码了

7、成功后，项目的目录下就会出现刚才创建的文件夹

4、mapper（映射层/持久层）、在pom文件里改一下 java 的版本，为了每个模块的版本不发生冲突，统一改成了适配 jdk1.8 的情况 （有的版本冲突是启动不了的）

<?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.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->        <relativePath/> <!-- lookup parent from repository -->    </parent>    <groupId>com.rabbitsystem</groupId>    <artifactId>carrot</artifactId>    <version>0.0.1-SNAPSHOT</version>    <name>rabbit-system</name>    <description>rabbit-system</description>    <url/>    <licenses>        <license/>    </licenses>    <developers>        <developer/>    </developers>    <scm>        <connection/>        <developerConnection/>        <tag/>        <url/>    </scm>    <properties>        <java.version>1.8</java.version> <!-- 保持 JDK 1.8 -->    </properties>    <dependencies>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-jdbc</artifactId>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-web</artifactId>        </dependency>        <dependency>            <groupId>org.mybatis.spring.boot</groupId>            <artifactId>mybatis-spring-boot-starter</artifactId>            <version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->        </dependency>        <dependency>            <groupId>com.oracle.database.jdbc</groupId>            <artifactId>ojdbc8</artifactId> <!-- 使用适合 JDK 1.8 的 ojdbc8 -->            <scope>runtime</scope>        </dependency>        <dependency>            <groupId>org.projectlombok</groupId>            <artifactId>lombok</artifactId>            <optional>true</optional>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-test</artifactId>            <scope>test</scope>        </dependency>        <dependency>            <groupId>org.mybatis.spring.boot</groupId>            <artifactId>mybatis-spring-boot-starter-test</artifactId>            <version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->            <scope>test</scope>        </dependency>        <dependency>            <groupId>org.apache.commons</groupId>            <artifactId>commons-lang3</artifactId>            <version>3.12.0</version>        </dependency>        <dependency>            <groupId>log4j</groupId>            <artifactId>log4j</artifactId>            <version>1.2.16</version>        </dependency>    </dependencies>    <build>        <plugins>            <plugin>                <groupId>org.springframework.boot</groupId>                <artifactId>spring-boot-maven-plugin</artifactId>                <version>2.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->                <configuration>                    <excludes>                        <exclude>                            <groupId>org.projectlombok</groupId>                            <artifactId>lombok</artifactId>                        </exclude>                    </excludes>                </configuration>            </plugin>        </plugins>    </build></project>

7、把 application.properties 文件的后缀改成 yml，并进行项目配置

## 指定web容器访问端口号rabbit:  name: 兔子系统  version: v-1.0## web容器端口号server:  port: 8080## 配置数据库连接spring:  datasource:    driver-class-name: oracle.jdbc.OracleDriver    url: jdbc:oracle:thin:@//localhost:1521/ORCL    username: 用户名    password: 密码## 配置mybatis中mapper.xml文件扫描mybatis:  type-aliases-package: com.rabbitSystem.carrot.pojo.sel.*  mapper-locations: classpath:mapper/*.xml   # mapper.xml文件映射

8、jdk等信息

3、选择对应的依赖，少选多选都没事，创建完了可以在配置文件里面加，选完了就点击 create

4、业务层

package com.rabbitSystem.carrot.service;import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;import java.util.List;public interface CustomerService {    List<CustomerSelPojo> selCustomers();}

15、在数据库建一个用户表（这里是拿来示范的，建完表可以加一些测试数据）

-- 创建用户表CREATE TABLE CUSTOMER (  ID VARCHAR2(32) NOT NULL,  ACCOUNT VARCHAR2(9) NOT NULL,  ROLE VARCHAR2(1) DEFAULT '2' NOT NULL,  HEAD_PROTRAIT_NAME VARCHAR2(200) NOT NULL,  HEAD_PROTRAIT_FILE VARCHAR2(200) NOT NULL,  NICK_NAME VARCHAR2(32) NOT NULL,  PASSWORD VARCHAR2(64) NOT NULL,  SALT VARCHAR2(32) NOT NULL,  BIRTHDAY Date,  AGE VARCHAR2(3),  SEX VARCHAR(1),  SAFETY1_QUESTION VARCHAR2(64)，  SAFETY2_QUESTION VARCHAR2(64)，  SAFETY3_QUESTION VARCHAR2(64)，  SAFETY1_ANSWER VARCHAR2(32)，  SAFETY2_ANSWER VARCHAR2(32)，  SAFETY3_ANSWER VARCHAR2(32)，  CREATE_TIME Date DEFAULT SYSDATE NOT NULL,   UPDATE_TIME Date DEFAULT SYSDATE NOT NULL,  IS_DELETE varchar(1) DEFAULT 'N' NOT NULL);-- 各个字段的注释COMMENT ON TABLE CUSTOMER IS '用户表';COMMENT ON COLUMN CUSTOMER.ID IS '用户表ID';COMMENT ON COLUMN CUSTOMER.ACCOUNT IS '账号';COMMENT ON COLUMN CUSTOMER.ROLE IS '角色 0 超级管理员；1 管理员；2 普通用户';COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_NAME IS '头像图片名字';COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_FILE IS '头像二进制文件';COMMENT ON COLUMN CUSTOMER.NICK_NAME IS '昵称';COMMENT ON COLUMN CUSTOMER.PASSWORD IS '密码';COMMENT ON COLUMN CUSTOMER.SALT IS '盐加密';COMMENT ON COLUMN CUSTOMER.BIRTHDAY IS '出生日期';COMMENT ON COLUMN CUSTOMER.AGE IS '年龄';COMMENT ON COLUMN CUSTOMER.SEX IS '性别 1 女；0 男；2 保密';COMMENT ON COLUMN CUSTOMER.SAFETY1_QUESTION IS '安全问题1id';COMMENT ON COLUMN CUSTOMER.SAFETY2_QUESTION IS '安全问题2id';COMMENT ON COLUMN CUSTOMER.SAFETY3_QUESTION IS '安全问题3id';COMMENT ON COLUMN CUSTOMER.SAFETY1_ANSWER IS '安全问题1答案';COMMENT ON COLUMN CUSTOMER.SAFETY2_ANSWER IS '安全问题2答案';COMMENT ON COLUMN CUSTOMER.SAFETY3_ANSWER IS '安全问题3答案';COMMENT ON COLUMN CUSTOMER.CREATE_TIME IS '创建时间';COMMENT ON COLUMN CUSTOMER.UPDATE_TIME IS '更新时间';COMMENT ON COLUMN CUSTOMER.IS_DELETE IS '是否删除 Y 已删除；N 未删除';

9、前端创建

1、配置路由（访问地址）

// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router';import App from '@/App'; // 示例主页组件// import RabbitSystemVueApp from '@/RabbitSystemVueApp'; // 示例根组件import CustomerPage from '@/module/rabbit-system/views/CustomerPage';import NotFound from '@/NotFoundPage';const routes = [    { path: '/', component: App },    // { path: '/app', component: RabbitSystemVueApp },    { path: '/CustomerPage', component: CustomerPage },    { path: '/:pathMatch(.*)*', component: NotFound } // 404 路由,匹配所有未定义的路径];const router = createRouter({    history: createWebHistory(process.env.BASE_URL),    routes,});export default router;

14、</p> <router-link class="home-link" to="/CustomerPage">返回首页</router-link> </div> </div></template><script setup></script><style scoped>.not-found { display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #61E7FFFF, #d7a1b2); color: #fff; font-family: 'Arial', sans-serif;}.container { text-align: center; background: rgba(0, 0, 0, 0.6); border-radius: 10px; padding: 40px; max-width: 500px; width: 100%;}h1 { font-size: 120px; margin: 0; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}p { font-size: 18px; margin: 20px 0; line-height: 1.5;}.home-link { display: inline-block; padding: 10px 20px; margin-top: 20px; font-size: 16px; color: #fff; background-color: #42b983; border-radius: 5px; text-decoration: none; transition: background-color 0.3s, transform 0.3s;}.home-link:hover { background-color: #359d77; transform: scale(1.05);}.home-link:focus { outline: none;}</style>

当访问地址不正确的时候，会到这个页面

19、

npm install axios

<template>  <!-- 用户列表表格 -->  <el-table v-loading="loading" :data="customerList">    <el-table-column type="index" label="序号" width="100px" align="center" />    <el-table-column label="账号" align="center" prop="account"/>    <el-table-column label="角色" align="center" prop="role"/><!--    <el-table-column label="头像" align="center" prop="customerHeadProtrait"/>-->    <el-table-column label="昵称" align="center" prop="nickName"/>    <el-table-column label="出生日期" align="center" prop="birthday"/>    <el-table-column label="年龄" align="center" prop="age"/>    <el-table-column label="性别" align="center" prop="sex"/>    <el-table-column label="创建时间" align="center" prop="createTime"/>    <el-table-column label="更新时间" align="center" prop="updateTime"/>    <el-table-column label="是否正常使用" align="center" prop="isDelete"/>  </el-table></template><script>import { ref, onMounted } from 'vue';import { selCustomersJs } from '@/module/rabbit-system/api/customer';export default {  name: 'CustomerPage',  setup() {    const loading = ref(true);    const customerList = ref([]);    // 页面加载时调用方法    onMounted(() => {      selCustomersVue();    });    // 批量处理数字英文转换    const processCustomerData = (customers) => {      customers.forEach(customer => {        // 处理 role        if (customer.role === "1") {          customer.role = "超级管理员";        } else if (customer.role === "2") {          customer.role = "管理员";        } else if (customer.role === "3") {          customer.role = "普通用户";        }        // 处理 sex        if (customer.sex === "0") {          customer.sex = "女";        } else if (customer.sex === "1") {          customer.sex = "男";        } else if (customer.sex === "2") {          customer.sex = "保密";        }        // 处理 isDelete        if (customer.isDelete === "N") {          customer.isDelete = "是";        } else if (customer.isDelete === "Y") {          customer.isDelete = "否";        }      });      return customers;    };    // 获取用户数据    const selCustomersVue = async () => {      loading.value = true;      try {        const response = await selCustomersJs();        // 批量处理数据        const customers = processCustomerData(response.data.data);        customerList.value = customers;      } catch (error) {        console.error('Error fetching customers:', error);      } finally {        loading.value = false;      }    };    return {      loading,      customerList,    };  },};</script><style scoped>/* 添加样式 */</style>

15、 */ public AjaxResult() { } /** * 初始化一个新创建的 AjaxResult 对象 * * @param type 状态类型 * @param msg 返回内容 */ public AjaxResult(Type type, String msg) { super.put(CODE_TAG, type.value); super.put(MSG_TAG, msg); } /** * 初始化一个新创建的 AjaxResult 对象 * * @param type 状态类型 * @param msg 返回内容 * @param data 数据对象 */ public AjaxResult(Type type, String msg, Object data) { super.put(CODE_TAG, type.value); super.put(MSG_TAG, msg); if (StringUtils.isNotNull(data)) { super.put(DATA_TAG, data); } } /** * 初始化一个新创建的 AjaxResult 对象 * @param type 状态类型 * @param msg 返回内容 * @param data 数据对象 * @param count 数据总数量 */ public AjaxResult(Type type, String msg, Object data,Integer count) { super.put(CODE_TAG, type.value); super.put(MSG_TAG, msg); if (StringUtils.isNotNull(data)) { super.put(DATA_TAG, data); } if(count!=null){ super.put(DATA_COUNT,count); } } /** * 方便链式调用 * * @param key 键 * @param value 值 * @return 数据对象 */ @Override public AjaxResult put(String key, Object value) { super.put(key, value); return this; } /** * 返回成功消息 * * @return 成功消息 */ public static AjaxResult success() { return AjaxResult.success("操作成功"); } /** * 返回成功数据 * * @return 成功消息 */ public static AjaxResult success(Object data) { return AjaxResult.success("操作成功", data); } /** * 返回成功消息 * * @param msg 返回内容 * @return 成功消息 */ public static AjaxResult success(String msg) { return AjaxResult.success(msg, null); } /** * 返回成功消息 * * @param msg 返回内容 * @param data 数据对象 * @return 成功消息 */ public static AjaxResult success(String msg, Object data) { return new AjaxResult(Type.SUCCESS, msg, data); } /** * 返回警告消息 * * @param msg 返回内容 * @return 警告消息 */ public static AjaxResult warn(String msg) { return AjaxResult.warn(msg, null); } /** * 返回警告消息 * * @param msg 返回内容 * @param data 数据对象 * @return 警告消息 */ public static AjaxResult warn(String msg, Object data) { return new AjaxResult(Type.WARN, msg, data); } /** * 返回错误消息 * * @return */ public static AjaxResult error() { return AjaxResult.error("操作失败"); } /** * 返回错误消息 * * @param msg 返回内容 * @return 警告消息 */ public static AjaxResult error(String msg) { return AjaxResult.error(msg, null); } /** * 返回错误消息 * * @param msg 返回内容 * @param data 数据对象 * @return 警告消息 */ public static AjaxResult error(String msg, Object data) { return new AjaxResult(Type.ERROR, msg, data); }}

控制层

package com.rabbitSystem.carrot.controller;import com.rabbitSystem.carrot.common.core.AjaxResult;import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;import com.rabbitSystem.carrot.service.CustomerService;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;import java.util.List;/** * 标识控制层 * @RestController 组合注解, @Controller +  @ResponseBody , * 在类头部指定@RestController注解,就表示该控制器下所有的方法均以 json格式类型从服务端响应给客户端(前台) */@RestController/** * 处理 HTTP 请求 */@RequestMapping("/CustomerController")/** * 用户的控制层 */public class CustomerController {    /**     * 调用业务访问层对象     */    @Resource    private CustomerService customerService;    /**     * GetMapping：处理 GET 请求（查询一般用 get 请求）     * 查询所有用户信息的方法     */    @GetMapping("/selCustomers")    public AjaxResult selCustomers(){        List<CustomerSelPojo> customerSelPojoList = customerService.selCustomers();        int i = 200;        if (customerSelPojoList == null){            i = 0;        };        String msg = i == 200 ?  "查询成功！" : "查询失败！";        return new AjaxResult(i == 200 ? AjaxResult.Type.SUCCESS : AjaxResult.Type.ERROR,msg, customerSelPojoList);    }}

14、控制层

控制层会用到一个返回ajax类型数据的工具类，我提供在下面

package com.rabbitSystem.carrot.common.core;import com.rabbitSystem.carrot.common.utils.StringUtils;import java.util.HashMap;/** * 操作消息提醒 * * @author ruoyi */public class AjaxResult extends HashMap<String, Object> {    private static final long serialVersionUID = 1L;    /**     * 状态码     */    public static final String CODE_TAG = "code";    /**     * 返回内容     */    public static final String MSG_TAG = "msg";    /**     * 数据对象     */    public static final String DATA_TAG = "data";    /**     * 数据总数量     */    public static final String DATA_COUNT = "count";    /**     * 状态类型     */    public enum Type {        /**         * 成功         */        SUCCESS(200),        /**         * 警告         */        WARN(301),        /**         * 校验失败         */        FAILED(-1),        /**         * 错误         */        ERROR(500);        private final int value;        Type(int value) {            this.value = value;        }        public int value() {            return this.value;        }    }    /**     * 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。映射层
package com.rabbitSystem.carrot.mapper;import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapperpublic interface CustomerMapper {     List<CustomerSelPojo> selCustomers();}
17、这是加载完成的情况
6、这是启动好的样子，有两个网址，可以复制第一个地址去浏览器打开，看到 Welcome to Your Vue.js App 就表示成功了
6、resources 下面的数据访问层及对应的类（工具包里面的AjaxResult工具类下面会提供）
11、构建vue
3、为了解决前后端跨域的问题，这里建了一个工具类
package com.rabbitSystem.carrot.common.core;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration/** * 解决跨域问题 */public class CorsConfig implements WebMvcConfigurer {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                .allowedOrigins("*") // 允许任意域名访问，或者替换为特定的域名                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法                .allowedHeaders("Content-Type", "Authorization") // 允许的请求头                .maxAge(3600); // 可选的，设置预检请求的缓存时间    }}
20、数据访问层
<?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.rabbitSystem.carrot.mapper.CustomerMapper">    <resultMap id="customerResultMap" type="com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo">        <id property="id" column="ID"/>        <result property="account" column="ACCOUNT"/>        <result property="role" column="ROLE"/>        <result property="headProtraitName" column="HEAD_PROTRAIT_NAME"/>        <result property="headProtraitFile" column="HEAD_PROTRAIT_FILE"/>        <result property="nickName" column="NICK_NAME"/>        <result property="password" column="PASSWORD"/>        <result property="salt" column="SALT"/>        <result property="birthday" column="BIRTHDAY"/>        <result property="age" column="AGE"/>        <result property="sex" column="SEX"/>        <result property="safety1Question" column="SAFETY1_QUESTION"/>        <result property="safety2Question" column="SAFETY2_QUESTION"/>        <result property="safety3Question" column="SAFETY3_QUESTION"/>        <result property="safety1Answer" column="SAFETY1_ANSWER"/>        <result property="safety2Answer" column="SAFETY2_ANSWER"/>        <result property="safety3Answer" column="SAFETY3_ANSWER"/>        <result property="createTime" column="CREATE_TIME"/>        <result property="updateTime" column="UPDATE_TIME"/>        <result property="isDelete" column="IS_DELETE"/>    </resultMap>    <select id="selCustomers" resultMap="customerResultMap">        select T.ID,T.ACCOUNT,T.ROLE,T.HEAD_PROTRAIT_NAME,               T.HEAD_PROTRAIT_FILE,T.NICK_NAME,T.PASSWORD,T.SALT,TO_CHAR(T.BIRTHDAY, 'YYYY-MM-DD') AS BIRTHDAY,               T.AGE,T.SEX,T.SAFETY1_QUESTION,T.SAFETY2_QUESTION,T.SAFETY3_QUESTION,               T.SAFETY1_ANSWER,T.SAFETY2_ANSWER,T.SAFETY3_ANSWER,               T.CREATE_TIME,T.UPDATE_TIME,               T.IS_DELETE from CUSTOMER T    </select></mapper>
18、修改配置文件vue.config.js
const { defineConfig } = require('@vue/cli-service');const { DefinePlugin } = require('webpack');module.exports = defineConfig({  // 配置开发服务器  devServer: {    port: 8082, // 设置开发服务器的端口号为 8082  },  // 是否转译依赖（依赖于 babel）  transpileDependencies: true,  // 配置公共路径，根据环境变量设置不同的路径  publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/',  // 配置 webpack  configureWebpack: {    plugins: [      new DefinePlugin({        // 定义全局常量，用于在生产环境中关闭 Vue 的生产模式水合不匹配的详细信息        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false)      }),    ],  },});
11、本地开发环境
后端开发软件：IntelliJ IDEA 2022.1.3
后端框架：SpringBoot
前端框架：@vue/cli 5.0.8 + Element UI
后端语言：Java
jdk版本：1.8.0_371
数据库：Oracle 19c
数据库操作：PLSQL Developer 15 (64 bit)
接口测试工具：Postman
二、本地开发环境
二、修改配置文件main.js
import { createApp } from 'vue';import RabbitSystemVueApp from './RabbitSystemVueApp'; // 引入主 Vue 组件import router from './router'; // 引入路由配置import ElementPlus from 'element-plus'; // 引入 Element Plus UI 库import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件// 创建 Vue 应用实例const app = createApp(RabbitSystemVueApp);// 使用插件app.use(router); // 注册路由插件app.use(ElementPlus); // 注册 Element Plus 插件// 挂载应用到 DOM 元素app.mount('#app'); // 将 Vue 应用挂载到 id 为 'app' 的 DOM 元素上
12、连接数据库（我这里是Oracle）这里面的sid可以在数据库里面查这样就可以直接在 IDEA 里面看到Oracle数据库了
10、存储位置、