首页 > 编程语言> 文章详细

JAVA课程设计-个人博客链接

2022-01-12 04:31:57 阅读：161 来源： 互联网

标签：username 课程设计 JAVA String request phone User 服务器链接

git代码仓库

Servlet实现注册

前端相关处理

在Vue框架的methods属性里，写入check函数，对前端传回来的数据用正则表达式进行检查。

绑定表单的单击事件，执行函数check(),因为根据查询的用法，可以实现返回false这个表单就不再提交，经过测试还是会提交，所以只能暂时做成把前端做成注册失败的提示，后端的service层对他的数据进行筛选，加不加入数据库。

相关前端代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap和jQuery -->
    <!-- <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>注册用户</title>

    <style>
        body{
            background:url(img/background01.png);
            background-size:cover;
            width: 100%;
            height: 655px;
        }
        #window01{
            background-color: rgba(253, 253, 253, 0.281);
            overflow: hidden;
            width: 50%;
            height: 75%;
            margin-left: 25%;
            margin-top: 40px;
            border: 2px solid rgb(139, 143, 146);
            border-radius: 18px;
            text-align:center
        }
        input[type="text"]{
            width: 50%;
            margin-left: 25%;
        }
        #input-form{
            margin-top: 10px;
        }

    </style>

</head>
<body>
<img id="logo" src="https://cas-paas-443.webvpn.jmu.edu.cn/cas/file/png/logo.png" alt="我是logo">
<div id="window01">
    <div id="register-icon">
        <img src="img/register.png" alt="register" style="width: 100px; margin-top: 50px;">
    </div>
    <form @submit="check();" action="./User/register" method="post" id="input-form">
        <div class="form-group">
            <input v-model="username" name="username" type="text" class="form-control" placeholder="用户名">
        </div>
        <div class="form-group">
            <input v-model="password" name="password"  type="text" class="form-control" placeholder="密码">
        </div>
        <div class="form-group">
            <input  v-model="phone" name="phone" type="text" class="form-control" placeholder="手机号">
        </div>
        <label  for="#"><input type="radio" name="gender" value="男">男</label>
        <label for="#"><input type="radio" name="gender" value="女">女</label><br>
        <button  type="submit" name="registerButton" class="btn btn-light" style="width: 200px;">注 册</button>
    </form>

    <!-- 登录跳转 -->
    <div id="login" style="margin-right:25%;">
        <a href="index.jsp">
            <button type="submit" class="btn btn-default text-info" style="float: right;;"><small>已有账号?点我登录</small></button>
        </a>
    </div>
</div>

</body>
</html>

<script src="js/axios-min.js"></script>
<script src="js/vue.js"></script>

<script>
    new Vue({
        el:"#window01",
        data(){
            return{
                username:"",
                password:"",
                phone:"",
                gender:"",
                code:""
            }
        },
        methods:{
            check(){
                let reg = /^\w{2,12}$/;
                if(this.username.length == 0){
                    alert("用户名不为空!");
                    return false;
                }else if(!reg.test(this.username)){
                    alert("用户名应为2-12位，且只能包含数字字母及其下划线")
                }
                reg = /^\w{3,12}$/;
                if(!reg.test(this.password)){
                    alert("密码不要少于3位!且不包含中文");
                    return false;
                }
                reg = /^1\d{10}$/
                if(!reg.test(this.phone)){
                    alert('请输入有效的手机号！');
                    return false;
                }
            }
        }
    })
</script>

后端的servlet层以及service层处理

@WebServlet(name = "UserRegisterServlet", value = "/User/register")
public class UserRegisterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String phone = request.getParameter("phone");
        String gender = request.getParameter("gender");
        UserService userRegister = new UserServiceImpl();
        Boolean success = userRegister.register(username, password, phone, gender);
        if (success) {
            response.sendRedirect(request.getContextPath());
        } else {

            response.sendRedirect(request.getContextPath() + "/register.html");
        }
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

因为是应用表单传输，直接用getParameter，通过关键词获取分割后的键值对的值。然后传入service进行业务逻辑的处理。Service层还进行了注册内容的条件的正则表达式筛选。

//UserServiceImpl中的方法 
@Override
    public Boolean register(String username, String password, String phone, String gender) {
        User user = new User(username, password, phone, gender);

        //对不符合规则的信息筛选
        String usernameRegular = "\\w{2,12}";
        String passwordRegular = "\\w{3,12}";
        String phoneRegular = "1\\d{10}";

        Matcher userMatcher = Pattern.compile(usernameRegular).matcher(username);
        Matcher passMatcher = Pattern.compile(passwordRegular).matcher(phone);
        Matcher phoneMatcher = Pattern.compile(phoneRegular).matcher(phone);
        //都符合正则表达式的内容
        if(userMatcher.matches()&&passMatcher.matches()&&phoneMatcher.matches()){
            UserInfoDao userInfo = new UserInfoDaoImpl();
            Boolean success = userInfo.update(user);
            return success;
        }else{
            return false;
        }
    }

用Vue框架实现前后端交互实时展示

效果展示:

前端用Vue框架实现数据的双向绑定且用axios发送获取数据的请求

<div v-for="text in allText" class="v">
            <div class="part-1">
                <div class="userHead">
                    <img src="https://gitee.com/konjac_wjh/pig-go/raw/master/img/user.png" alt="userHead" style="width: 39px;">
                </div>
                <div class="user">
                    <p>{{text.poster}}</p>
                </div>
                <div class="record-button">
                    <button type="submit" name="reply-post" class="btn btn-danger">delete</button>
                </div>
            </div>
            <div class="seg"></div>
            <div class="part-2">
                <div class="post-title">
                    <p>{{text.title}}</p>
                </div>
            </div>
            <div class="seg"></div>
            <div class="part-3">
                <div class="post-text" text-justify pre-scrollable>
                    <p>{{text.text}}</p>
                </div>
            </div>
        </div>
        
<script src="../js/axios-min.js"></script>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#show",
        data(){
            return{
                allText:[]
            }
        },
        mounted(){
            //页面加载完成，发送axios的异步请求
            var _this = this;
            axios({
                method:"post",
                url:"../Text/sts"
            }).then(function (resp) {
                _this.allText = resp.data;
            })
        }
    })

</script>

通过{{}}实现内容的双向绑定，然后发送axios请求获取数据，html通过v-for="text in allText"的Vue指令遍历传回的texts数组，打印多个内容呈现的块。

var _this = this;是因为在axios块里，选择的是axios的这块，从而无法获取Vue里allText的数据，所以要先让一个变量指向Vue块，然后axios可以返回回数据。

后端的数据处理

判断该用户是谁，利用了seesion技术，在登录时已经将用户信息写入seesion 了，直接索引对应数据，放到service层处理即可。

主要利用阿里巴巴的fastjson将java里的类转换成json字符串，返回给前端

   HttpSession session = request.getSession();
        User user = (User) session.getAttribute("User");
        //将数据JSON化
        String jsonString = JSON.toJSONString(user);
        //响应数据
        response.getWriter().write(jsonString);

在后面同样可以实现将传入的json数据对象化，在查询帖子的servlet里：

 //获取session
            HttpSession session = request.getSession();
            User user = (User) session.getAttribute("User");
            //调用service查询
            TextService textService = new TextServiceImpl();
            List<Text> textList = textService.getText(user.getUsername());
            //将数据逆序化以实现：使得最新发布的信息会插入在表头。
            Collections.reverse(textList);
            //将数据JSON化
            String jsonString = JSON.toJSONString(textList);
            //响应数据
            response.getWriter().write(jsonString);

然后前端可以直接对其当成数组对象进行处理。

fastjson的依赖：

   <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.66</version>
        </dependency>

利用Druid数据连接池优化

导入对应的maven依赖

<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.10</version>
        </dependency>

在Source目录下，创建配置资源文件 druid.properties

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://47.113.195.222/JavaWebPrjDB?useSSL=false&useServerPrepStmts=true
username=root
password=123456
# 初始化连接数量
initialSize=5
# 最大连接数
maxActive=10
# 最大等待时间
maxWait=3000

优化连接池

private static DataSource dataSource;
static {
        try{
            Properties properties = new Properties();
            InputStream inputProperties = DbUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            properties.load(inputProperties);
            dataSource = DruidDataSourceFactory.createDataSource(properties);

        }catch (Exception e){
            e.printStackTrace();
        }
    }

    //获取连接
    public static Connection getConnection() throws SQLException {
        return dataSource.getConnection();
    }

根据Dbutils的类获取对应url下的配置文件的信息输入流，然后调用方法load读取该配置信息到Properties类，放入properties，然后用数据库连接池的会话工厂初始化连接池。

使用阿里巴巴的Druid数据库连接池，提高了数据库的链接性能，且因为Druid是在连接池里先建立了多个连接的Connection对象，当获取连接对象时，连接池会分配一个连接对象出来，当释放资源时，只是将连接对象给返还给连接池，而不需要重复的创造，删除，节省了大量的资源。且还有一些稳定性和安全性的处理，例如可以自动的识别sql注入，然后让sql注入不能实现，大大提高了安全性。

部署到云服务器

参考链接

准备工作

下载linux端的三大件：JDK、Tomcat以及Mysql，然后还有通过Xshell连接服务器、WinSCP实现本机与服务器的极为方便快捷的文件传输以及服务器端的文件修改，设置好对应开放的端口，然后解压三大件，设置好配置。将项目打包成的war包放到服务器端运行。

通过在阿里云上购买云服务器，实现将web项目部署到云端上，实现可以在公网上访问。因为java是跨平台的语言，需要jvm去执行.class的java编译好的文件，所以需要下载linux版本的jdk，然后用tomcat实现部署，mysql实现服务器端的数据存放。

其中用到了三个小工具，大大简化了服务器端的各项操作

一个是Xshell7，实现了可以与远程服务器建立ssh连接。

第二个是Navicat，极为方便的实现与服务器端的mysql连接，且能在视图上修改数据库的配置及信息。

第三个是WinSCP，可以用简易的操作:拖拽、双击、右键然后点击删除，或者是直接点开配置一些配置文件。这些操作都极为方便。极大的简化了在linux上对文件进行操作。

服务器配置

应用程序：

远程连接：Xshell

远程文件：WinSCP

安装jdk、 Tomcat 、 Mysql

大佬文档的思维导图

https://www.processon.com/mindmap/61d6f75907912973ef10d87e

解压安装jdk、tomcat、mysql

其中jdk需要配置环境变量

配置服务器的防火墙

systemctl status firewalld //查看服务状态
firewall-cmd --state //查看firewall的状态
service firewalld start //开启服务器
service firewalld restart //重启
service firewalld stop //关闭
firewall-cmd --query-port=8080/tcp //查询端口是否开放
firewall-cmd --permanent --add-port=80/tcp //开放80端口
firewall-cmd --permanent --remove-port=8080/tcp //移除端口
firewall-cmd --reload //修改配置后重启防火墙

配置安全组

配置tomcat

进入tomcat下的bin目录
./startup.sh //开启服务器
./shutdwon/sh //关闭服务器

cd /../conf   vim server.xml //进入配置文件
8080端口改为80端口
host标签中复制如下内容
<Context docBase="/usr/local/tomcat/***/webapps/项目名" path="" reloadable="false"/>
/usr/local/tomcat/apache-tomcat-10.0.14/webapps

开启项目

自此,成功部署到云服务器上。

标签：username,课程设计,JAVA,String,request,phone,User,服务器,链接
来源： https://www.cnblogs.com/jy00/p/15789902.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9