河工小微开发记录

2018-12-05  本文已影响0人  左志伟

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

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

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

系统模块划分

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

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

开发要求

打开项目和基本配置

  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

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

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

  2. 连接到本地数据库
    默认无密码登录，打开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"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个例子</title>
</head>
<body>

<!-- 提交的form -->
<form action="firstExample" method="post">
登录名
<input name="userId"/>
<button>查看姓名</button>
</form>

<!-- jsp可以在页面中写java代码 -->
<!-- jsp拥有自己的标签 -->
<%
String userName = "";
if (null != session.getAttribute("userName")) {
    userName = session.getAttribute("userName").toString();
}
%>
<h4><%=userName%></h4>

</body>
</html>

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


    web.xml 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>HebutChat</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
    <servlet>
        <servlet-name>firstExample</servlet-name>
        <servlet-class>com.hebut.controller.IndexController</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>firstExample</servlet-name>
        <url-pattern>/firstExample</url-pattern>
    </servlet-mapping>
</web-app>

  1. 开始写控制器


    image.png

  2. 开始写连接数据库层


    image.png

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


    image.png

后台管理系统

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

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

猜你喜欢

热点阅读