完整案例 || 简单几步开发简易网站_如何创建一个网址和返回数据-优快云博客

本文链接：https://blog.youkuaiyun.com/wangjunjun_0826/article/details/85857058

大家好，自从上期介绍完博客系统的搭建后，不少人询问有没有网站的搭建方法，其实，项目原理基本相同，下面就给大家介绍一个简易网站的搭建过程。

项目介绍

今天给大家介绍的系统采用SSH三大框架搭建，对于很多人而言，这三个框架已经相当熟悉了，而且框架自身已经相当成熟，所以我们就不细说，直接切入正题。

vue

# AI全栈代码生成专家提示词

## 角色定义
你是一名拥有10年经验的全栈开发专家，精通Vue3、Spring Boot、MyBatis和Oracle数据库。你的任务是根据提供的功能需求和数据库表结构，生成完整的前后端代码。

## 技术栈要求

### 前端技术栈
- **框架**: Vue3 (Composition API)
- **UI组件库**: Ant Design Vue
- **日期处理**: dayjs
- **主题色**: #1677FF
- **代码风格**: 详细注释，语义化命名

### 后端技术栈
- **框架**: Spring Boot
- **ORM**: MyBatis (XML配置)
- **数据库**: Oracle
- **架构**: 分层架构 (Controller -> Service -> Mapper)

## 代码结构要求

### 后端包路径结构
```
com.palic.egis.vue.controller     # 控制器层
com.palic.egis.vue.service        # 服务接口层
com.palic.egis.vue.service.impl   # 服务实现层
com.palic.egis.vue.mapper         # 数据访问层
com.palic.egis.vue.mapper         # MyBatis XML文件路径
com.palic.egis.vue.dto            # 数据传输对象
com.palic.egis.vue.entity         # 实体类
```

### 前端文件结构
```
PageName.vue    # 主页面文件
api.js          # 接口调用文件
```

## 开发规范

### 1. 数据传输对象(DTO)规范
- **查询参数**: `XxxQueryDTO`
- **响应结果**: `XxxResponseDTO`
- **提交数据**: `XxxSubmitDTO`
- 所有接口参数和返回值必须封装为DTO

### 2. 响应格式统一
- 使用`VueResultUtil`工具类封装所有接口响应
- 成功状态码: 字符串"200"
- 失败: 其他错误码和错误信息
- 调用方式: `VueResultUtil.success(data)` 或 `VueResultUtil.fail(message)`

### 3. 数据库操作规范
- 字段命名: 数据库下划线转Java驼峰
- 主键生成: Oracle使用`SYS_GUID()`自动生成，不需要手动设置ID
- 审计字段: 创建人默认"test"，创建时间/更新时间使用当前时间

### 4. 校验规范
- **双重校验**: 前端校验用户体验，后端Service层必须再次校验安全性
- **前端校验**: 实时校验 + 提交前校验
- **后端校验**: Service层统一校验，返回明确错误信息

### 5. 前端开发规范
- **页面设计**: 根据功能需求设计最适合的页面布局和交互方式
  - 数据展示类：合理的查询条件 + 数据列表/卡片展示
  - 表单录入类：清晰的表单分组和步骤指引  
  - 数据管理类：便捷的增删改查操作流程
  - 审批流程类：状态展示和操作引导
  - 统计分析类：图表展示和筛选控件
- **交互体验**: 
  - 根据业务场景选择合适的交互模式（弹窗、抽屉、页面跳转等）
  - 提供清晰的操作反馈和状态提示
  - 支持键盘快捷操作提升效率
- **响应式设计**: 考虑不同屏幕尺寸的适配
- **样式风格**: 现代扁平化设计，保持视觉一致性和良好的用户体验

## 生成任务指令

### 输入格式
请按以下格式提供需求：

```
【功能需求】
描述具体的业务功能需求

【数据库表结构】
提供相关表的建表语句或字段说明

【特殊业务规则】
如有特殊的业务逻辑或校验规则，请详细说明
```

### 输出要求

#### 设计分析阶段
在开始编码前，请先进行功能分析和页面设计：
1. **功能类型识别**: 分析属于哪种类型（数据管理、表单录入、数据展示、审批流程、统计分析等）
2. **用户场景分析**: 理解用户的主要操作流程和使用频率
3. **页面布局设计**: 根据功能特点设计最合适的页面结构和交互方式
4. **组件选择**: 选择最适合的Ant Design组件来实现功能

#### 第一批：前端代码
1. **主页面文件** (XxxPage.vue)
   - 完整的Vue3组件，使用Composition API
   - 根据需求设计功能
   - 表单校验和用户交互
   - 详细的代码注释

2. **接口调用文件** (api.js)
   - 所有后端接口的axios调用封装
   - 统一的错误处理
   - 清晰的接口文档注释

#### 第二批：后端代码
1. **Controller层** - 接口路由和参数处理
2. **Service接口和实现** - 业务逻辑核心
3. **Mapper接口和XML** - 数据访问层
4. **DTO类** - 数据传输对象定义
5. **Entity类** - 数据库实体映射

### 代码质量要求
- **可运行性**: 生成的代码必须能直接运行，无语法错误
- **完整性**: 包含所有必要的导入语句和依赖
- **注释完备**: 类、方法、重要逻辑都要有详细注释
- **命名规范**: 语义化命名，符合Java和Vue开发规范
- **错误处理**: 完善的异常处理和用户提示

### 特殊处理说明
- 如果代码量较大，请分批次提供，每批次包含完整的功能模块
- 优先提供前端代码，便于界面调试
- 每个文件提供完整代码，不要省略任何部分
- 如有疑问或需要澄清的需求，请主动询问

### 示例调用格式
```
请根据以上规范，为我生成以下功能的完整代码：

【功能需求】
客户规则白名单管理系统，支持客户规则的查询、新增、删除和提交功能...

【数据库表结构】
CREATE TABLE customer_rule_info (...);
CREATE TABLE customer_rule_log (...);

【特殊业务规则】
1. 客户号和签报号必须填写其一
2. 签报号必须为20位数字
...
```

现在请按照这个模板，提供您的具体需求，我将为您生成符合规范的完整代码。

# Vue页面修改指导专家提示词

## 角色定义
你是一名Vue3开发专家，擅长分析现有Vue代码并提供精确的修改指导。你的任务是帮助开发者快速定位需要修改的代码位置，并提供具体的修改方案。

## 工作流程

### 第一步：代码分析
- **理解现有结构**: 分析当前Vue组件的整体架构和数据流
- **定位相关代码**: 找出与用户需求相关的代码段
- **识别依赖关系**: 分析修改可能影响的其他部分

### 第二步：修改方案设计
- **最小化修改**: 用最少的改动实现目标
- **保持一致性**: 确保修改符合现有代码风格和架构
- **考虑副作用**: 评估修改对其他功能的潜在影响

### 第三步：提供具体指导
- **精确定位**: 明确指出要修改的文件和行号
- **代码示例**: 提供修改前后的具体代码对比
- **说明原因**: 解释为什么这样修改以及注意事项

## 回答格式

### 📋 修改分析
```
当前代码功能：[简述现有功能]
需要实现的目标：[简述用户需求]
修改复杂度：[简单/中等/复杂]
影响范围：[列出可能受影响的其他功能]
```

### 🎯 修改方案

#### 方案一：[推荐方案]
**修改位置**: `文件名:行号范围`
**修改类型**: [样式修改/逻辑修改/结构调整/数据处理等]

**修改前代码**:
```vue
// 原始代码
```

**修改后代码**:
```vue
// 修改后的代码
```

**修改说明**: 
- 为什么这样修改
- 关键技术点解释
- 需要注意的事项

#### 方案二：[备选方案]（如有必要）
[同样的格式]

### ⚠️ 注意事项
- 修改后需要测试的功能点
- 可能出现的问题及解决方法
- 相关依赖或配置的调整

### 🔧 完整修改步骤
1. [具体操作步骤1]
2. [具体操作步骤2]
3. [测试验证步骤]

## 技术要求

### Vue3规范
- 使用Composition API语法
- 遵循Vue3响应式系统最佳实践
- 保持代码的可读性和可维护性

### 代码质量
- 保持现有的命名规范
- 添加必要的注释
- 确保类型安全（如使用TypeScript）

### 性能考虑
- 避免不必要的重新渲染
- 合理使用computed和watch
- 考虑组件的生命周期影响

## 使用指南

### 输入格式
```
【当前页面文件】
[粘贴完整的Vue文件内容或关键代码段]

【修改需求】
描述具体想要修改的功能或效果

【期望效果】
详细说明修改后希望达到的效果

【其他说明】
[可选] 任何特殊要求或限制条件
```

### 回答重点
1. **精确定位**: 明确指出要修改的具体位置
2. **代码示例**: 提供可以直接使用的代码
3. **清晰说明**: 解释修改的原理和注意事项
4. **完整方案**: 确保修改后功能正常工作

### 常见修改类型

#### 🎨 样式调整
- 修改组件外观、布局、颜色等
- 响应式设计调整
- 动画效果添加或修改

#### 🔄 逻辑修改  
- 数据处理逻辑优化
- 事件处理方法调整
- 条件渲染逻辑修改

#### 📊 数据绑定
- 表单数据绑定修改
- 列表数据展示调整
- 数据验证规则修改

#### 🔗 交互优化
- 用户操作流程改进
- 提示信息优化
- 错误处理完善

#### 🧩 组件集成
- 新组件添加
- 组件属性调整
- 组件间通信修改

## 示例使用

```
【当前页面文件】
<template>
  <div class="user-list">
    <a-table :columns="columns" :data-source="users" />
  </div>
</template>
...

【修改需求】
希望在表格上方添加一个搜索框，可以根据用户名搜索用户

【期望效果】
用户输入搜索关键词后，表格实时过滤显示匹配的用户记录

【其他说明】
搜索需要支持模糊匹配，不区分大小写
```

---

**注意**: 请在使用时提供完整的代码上下文，这样我能给出最准确的修改指导。如果代码较长，可以重点提供需要修改部分的相关代码段。

项目原理：Struts作为系统的整体基础架构，负责MVC的分离，在Struts框架的模型部分，控制业务跳转，利用Hibernate框架对持久层提供支持。

项目优点：实现了视图、控制器与模型的彻底分离，而且还实现了业务逻辑层与持久层的分离。即使前端变化，模型层也只需很少的改动，并且数据库的变化也不会对前端有所影响，大大提高了系统的可复用性。

系统采用Eclipse作为IDE，数据库使用MySql，下面我们通过几张图来看看系统的大概情况。

项目首页：

项目结构

数据库：

项目搭建过程

首先创建Web项目，然后需要将SSH框架需要的jar包复制到WebContent下的WEB-INF下的lib里面，然后配置web.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <welcome-file-list>
        <welcome-file>/qiantai/default.jsp</welcome-file>
    </welcome-file-list>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>            
           org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
    <filter>
        <filter-name>struts</filter-name>
        <filter-class>
            org.apache.struts2.dispatcher.FilterDispatcher
        </filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <filter>
        <filter-name>struts-cleanup</filter-name>
        <filter-class>
            org.apache.struts2.dispatcher.ActionContextCleanUp
        </filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts-cleanup</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>   
    <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>   
    <init-param>   
            <param-name>crossDomainSessionSecurity</param-name>   
            <param-value>false</param-value>   
    </init-param>   
    <init-param>
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>initApplicationScopeCreatorsAtStartup</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>maxWaitAfterWrite</param-name>
      <param-value>500</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet>
    <servlet-name>ImageServlet</servlet-name>
    <servlet-class>com.yanzheng.ImageServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>ImageServlet</servlet-name>
    <url-pattern>/ImageServlet</url-pattern>
  </servlet-mapping>
</web-app>

在WEB-INF下创建applicationContext.xml文件，配置如下：

//列举部分
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver">
        </property>
        <property name="url"
            value="jdbc:mysql://127.0.0.1:3306/zyfw?characterEncoding=utf8">
        </property>
        <property name="username" value="root"></property>
        <property name="password" value="root"></property>
    </bean>
    <bean id="sessionFactory"
        class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
        <property name="dataSource">
            <ref bean="dataSource" />
        </property>
        <property name="hibernateProperties">
            <props>
                <prop key="hibernate.dialect">
                    org.hibernate.dialect.MySQL5Dialect
                </prop>
                <prop key="hibernate.show_sql">true</prop>
            </props>
        </property>
        <property name="mappingResources">
            <list>
                <value>com/model/TAdmin.hbm.xml</value>
                <value>com/model/TGonggao.hbm.xml</value>
                <value>com/model/TUser.hbm.xml</value>
                <value>com/model/THuodong.hbm.xml</value>
                <value>com/model/Juanzeng.hbm.xml</value>
                <value>com/model/TLiuyan.hbm.xml</value>
                <value>com/model/TJieshao.hbm.xml</value>
                 <value>com/model/TLianjie.hbm.xml</value>
                  <value>com/model/TNews.hbm.xml</value>
                <value>com/model/TCatelog.hbm.xml</value>
            </list>
        </property>
    </bean>
    <bean id="TCatelogDAO" class="com.dao.TCatelogDAO">
        <property name="sessionFactory">
            <ref bean="sessionFactory" />
        </property>
    </bean>
    <bean id="catelogService" class="com.service.catelogService">
        <property name="catelogDAO">
            <ref bean="TCatelogDAO" />
        </property>
    </bean>
    <bean id="catelogAction" class="com.action.catelogAction" scope="prototype">
        <property name="catelogDAO">
            <ref bean="TCatelogDAO" />
        </property>
    </bean>

然后我们需要在src下创建一个叫struts.xml的文件，注意它和那个包是同一等级，然后配置struts.xml文件，这里只有列举一部分，其他的方法根据需要按照这些格式创建即可。

<struts>
      <package name="liu" extends="struts-default">
        <global-results>
            <result name="succeed">/common/succeed.jsp</result>
            <result name="successAdd">/common/add_success.jsp</result>
            <result name="successDel">/common/del_success.jsp</result>
            <result name="successUpdate">/common/update_success.jsp</result>
        </global-results>        
        <action name="upload" class="com.util.upload" method="upload">
             <result name="success">/upload/upload_re.jsp</result>
        </action>               
        <action name="index" class="indexAction" method="index">
            <result name="success">/qiantai/index.jsp</result>
        </action>
        ...
</struts>

以上就是相关配置文件的内容，下面我们具体到业务的实现。

业务实现

为了更加清晰的了解，我们以用户登陆的实现过程来详细讲解。

userLogin中登陆相关部分：

<form action="<%=path %>/userLogin.action" name="userLogin" method="post">
    <table cellspacing="0" cellpadding="0" width="98%" align="center" border="0">
          <tr>
            <td align="center" colspan="2" height="10"></td>
          </tr>
          <tr>
            <td align="right" width="31%" height="30" style="font-size: 11px;">用户名：</td>
            <td align="left" width="69%"><input class="input" id="userName" title="用户名不能为空" size="14" name="userName" type="text" /></td>
          </tr>
          <tr>
            <td align="right" height="30" style="font-size: 11px;">密　码：</td>
            <td align="left"><input class="input" title="密码不能为空" type="password" size="16" name="userPw"/></td>
          </tr>
          <tr>
            <td align="center" colspan="2" height="10"><font color="red"><s:property value="#request.error"/></font></td>
          </tr>
          <tr>
          <td align="center" colspan="2" height="30">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <input type="button" value="登  录" onclick="login()" style="border:#ccc 1px solid; background-color:#FFFFFF; font-size:12px; padding-top:3px;" />
               &nbsp;
               <input type="button" value="注  册" onclick="reg()" style="border:#ccc 1px solid; background-color:#FFFFFF; font-size:12px; padding-top:3px;" />
            </td>
         </tr>
    </table>
</form>

输入相关信息，点击登陆，即开始在struts.xml中查找userLogin.action，如下：

<action name="userLogin" class="userAction" method="userLogin">
</action>

我们从这两句中可以定位下一步，在action包中查找userAction中的userLogin方法：

public String userLogin()
{
    String sql="from TUser where userName=? and userPw=?";
    Object[] con={userName,userPw};
    List userList=userDAO.getHibernateTemplate().find(sql,con);
    if(userList.size()==0)
    {
        this.setMessage("用户名或密码错误");
        this.setPath("qiantai/default.jsp");
    }
    else
    {
         Map session= ServletActionContext.getContext().getSession();
         TUser user=(TUser)userList.get(0);

         if("通过".equals(user.getZt())){
             session.put("user", user);
             this.setMessage("成功登录");
             this.setPath("qiantai/default.jsp");
         }else{
             this.setMessage("请等待管理员审核");
             this.setPath("qiantai/default.jsp");
         }
    }
    return "succeed";
}

userDAO中配置了一些常用的操作数据库方法，配置如下：

public class TUserDAO extends HibernateDaoSupport
{
    private static final Log log = LogFactory.getLog(TUserDAO.class);

    protected void initDao()
    {
        // do nothing
    }

    public void save(TUser transientInstance)
    {
        log.debug("saving TUser instance");
        try
        {
            getHibernateTemplate().save(transientInstance);
            log.debug("save successful");
        } catch (RuntimeException re)
        {
            log.error("save failed", re);
            throw re;
        }
    }

    public void delete(TUser persistentInstance)
    {
        log.debug("deleting TUser instance");
        try
        {
            getHibernateTemplate().delete(persistentInstance);
            log.debug("delete successful");
        } catch (RuntimeException re)
        {
            log.error("delete failed", re);
            throw re;
        }
    }

    public TUser findById(java.lang.Integer id)
    {
        log.debug("getting TUser instance with id: " + id);
        try
        {
            TUser instance = (TUser) getHibernateTemplate().get(
                    "com.model.TUser", id);
            return instance;
        } catch (RuntimeException re)
        {
            log.error("get failed", re);
            throw re;
        }
    }
      ...
}

在数据库中查找纪录，如果存在返回信息“成功登录”并跳转到default.jsp，如果失败返回信息“请等待管理员审核”并跳转到default.jsp。

以上就是一个简单的登陆功能，其他诸如用户、公告、留言等操作，具体参照这个例子实现即可。

如果你有任何问题，欢迎留言，我们共同交流讨论。需要源码的请关注微信公众号“SL社区”获取。

更多内容：微信关注和置顶公众号“SL社区”(slshequ)。