河工小微开发记录

文档说明：本文档阶段性更新，可能会长期更新，但是链接不变，如果需要可及时跟进本文档进度。

系统说明：本系统开发分两个阶段

1. 校园网阶段：开发调试在校园网范围内可访问，每次ip会变，供内部人员或其他测试人员使用。
2. 公网阶段：发布到公网内，ip固定，域名固定，可稳定使用

系统模块划分

模块可能会随着系统的开发发生变动

1. 登录模块
   用户在登录页面可以输入用户名和密码，点击登录即可进行登录。
   需要限制用户名的长度，密码md5加密之后传给后台，不允许用户名和密码出现空格。
2. 注册模块
   用户输入用户名和密码，点击注册即可进行注册。
   要求同上，后台判断用户名是否重复。
3. 信息列表
   获取最新的信息列表，显示昵称，时间，内容等
4. 发布信息
   输入框，发送
5. 评论功能
   对一个信息新增评论
6. 详情页面
   显示详情，显示详细的评论

开发要求

• java环境
  具体java配置见如下链接的前半部分
  https://www.jianshu.com/p/eea5ea8a18d6
  或者去官网下载合适版本
  https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
  

  image.png
  
  java需要按照教程按步骤配置

• eclipse for java ee
  具体见如下链接的后半部分
  https://www.jianshu.com/p/eea5ea8a18d6
  或者去官网找最新版本
  https://www.eclipse.org/downloads/packages/
  

  image.png
  
  eclipse是不用安装的，下载到合适的位置，解压即可，打开文件夹会找到eclipse.exe

• tomcat
  去官网下载8.5版本
  https://tomcat.apache.org/download-80.cgi
  

  image.png
  
  tomcat是不用安装的，下载到合适的位置，解压，看到有bin、webapp等文件夹即可

• 注册github，下载并安装github客户端
  克隆项目
  

  image.png
  
  
  image.png
  
  url处填仓库地址https://github.com/zuozhiwei/HebutChat.git
  可以选择合适的位置，下载到合适的位置，里面包含一个eclipse的项目

打开项目和基本配置

1. 打开eclipse.exe

2. 导入项目

   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   

   这时已正确导入项目

3. 更改eclipse和项目的编码
   详见如下链接
   https://www.jianshu.com/p/c62bc3589b9a

4. eclipse 添加tomcat server

   
   
   image.png
   
   
   image.png
   
   

   在这里是所有的服务器列表，右键来新建一个

   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   

   找到解压后的tomcat路径
   此时已经添加了tomcat服务器

5. 设置项目的库

   
   
   image.png
   
   
   image.png
   
   

   关注以上两项，java和tomcat
   如果这两项后面有unbound字样，则需要做以下操作
   如果某一项有unbound则选中，然后点remove

   
   
   image.png
   
   然后再点添加库
   
   image.png
   
   
   image.png
   
   

   缺哪个加哪个
   如果是java则

   
   
   image.png
   
   如果是tomcat则
   
   image.png
   
   此时项目应该不会报错

6. 运行项目

   
   
   image.png

数据库安装与配置

1. 这里为了方便，直接安装了wamp，里面包含了mysql
   https://pan.baidu.com/s/1qWpvRXwO21PI_kJgXXOmdg
   提取码risf

启动之后图标变绿即成功打开

2. 安装mysql的可视化软件
   参考以下教程中的二 和 三
   https://www.jianshu.com/p/f8f422a6c04c

3. 连接到本地数据库
   默认无密码登录，打开navicat或者workbench新建数据库，新建表

数据库设计

1. 到这里wamp已经安装成功，打开navicat或者workbench开始设计数据库

2. 我使用navicat，打开navicat

3. 建立本地连接

   
   
   打开navicat
   
   
   本地连接

4. 新建数据库

   
   
   新建数据库
   
   
   新建数据库
   
   
   新建表
   
   
   新建表
   
   
   新建表
   
   
   新建表
   
   
   新建表
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   

   设计数据表和编辑数据表之后直接保存即可

代码首次连接数据库

1. 通过上面的工作，我们已经创建了javaee项目，可以运行java网站项目，设计好了数据库，现在可以在代码里尝试连接数据库

2. java连接mysql数据需要引入一个辅助类 jdbc，需要下载jdbc的jar包，这里我下载好导入到项目中，提交git，大家更新就好
   主要操作就是去百度一个jdbc mysql的jar包，复制到lib目录里

   
   
   image.png

3. 新建数据库操作类，连接mysql数据库
   新建sql的包，新建Sql.java

   
   
   image.png
   
   
   image.png
   
   

   写连接函数

   
   
   image.png
   
   
   image.png
   
   为方便开发，我们使用服务器上的数据库，这样可以保持数据一致，大家可以仿照连接本地数据库的方式来连接远程数据库
   
   image.png

第一个例子

1. 在页面中添加按钮，来显示数据库用户表里面的所有姓名
   在index.jsp里添加a标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>










登录名

查看姓名




<%
String userName = "";
if (null != session.getAttribute("userName")) {
    userName = session.getAttribute("userName").toString();
}
%>
<%=userName%>

2. 去web.xml里配置接口
   添加一个接口

   
   
   web.xml

  HebutChat
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
    
        firstExample
        com.hebut.controller.IndexController
    
    
        firstExample
        /firstExample
    

3. 开始写控制器

   
   
   image.png

4. 开始写连接数据库层

   
   
   image.png

5. 运行项目，打开网页测试

   
   
   image.png

后台管理系统

由此开始记录后台管理系统开发，不影响前台模块的开发，前台模块开发者可以参考

1. 后台管理系统介绍
   后台管理系统主要是为了管理河工小微的用户、发布的消息、评论、反馈信息等信息。