会员登录在我们的好多项目中都有用到,比如在后台管理系统,它的第一步就需要你进行登录,还有在我们常见的京东、淘宝、网易云音乐等一系列的软件上面都需要进行登录。

一,效果图。

前言

下面我们直接上代码

 

    今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程。参考了很多的文档,终于成功进行了部署。在这里将服务器的搭建和vue项目的

 1 fetch(url,{
 2     method: 'post', //使用post方法
 3     mode: 'cors', //跨域
 4     headers:{
 5         'Content-Type': 'application/x-www-form-urlencoded'
 6     },  //请求头
 7     body:'cellphone='+this.state.username+'&password='+this.state.password //方式数据
 8 }).then(res=>res.json())
 9     .then(json=>{if(json.code === 200){
10         localStorage['uid']=json.data.uid; //本地存储
11         this.props.history.replace("/detail")
12     }else {
13         console.log(json.data)
14     }})

 图片 1

部署上线进行整理(都是基础的知识,希望对大家有帮助。对我帮助是很大的)

现在我们可以看到,我使用的post方法向服务器端发送数据,当请求成功的时候,我们暂时把它存储在本地,这里也可以结合redux来做,有兴趣的可以参考我的另一篇博客初步了解redux来完成,然后进行跳转,如果请求没有成功我们可以直接返回它失败的原因,

 

2.流程

接下来说一下重点,验证它是否登录,我们专门建一个js文件

 

   
 1.服务器搭建

 1 import React from 'react';
 2 import {Route,Redirect} from 'react-router-dom'
 3 const AuthRoute = ({ component: Component, ...rest }) => (
 4     <Route {...rest} render={props => (
 5         localStorage.getItem("uid") ? (//如果本地存储里面有我们就进行跳转,没有就进行重定向返回登录页面
 6             <Component {...props}/>
 7         ) : (
 8             <Redirect to={{
 9                 pathname: '/news', //重定向的页面
10                 state: { from: props.location }
11             }}/>
12         )
13     )}/>
14 );
15 export {
16     AuthRoute
17 }

二,代码。

       
这里我用的是腾讯云的服务器。买了一个域名。没有备案的域名也可以使用。买完服务器进行域名解析。

最后我们到主路由页面引入我们的这个验证登录

 

图片 2点击添加解析,按照下面这样填写就行
马赛克是你的外网ip

1 import {AuthRoute} from '../assets/common/function'

图片 3

图片 4

把Route改成AuthRoute

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
</head>

<body>
    <ul class="list">
        <li class="item item-toggle">
            HTML5
            <label class="toggle toggle-positive">
                <input type="checkbox" checked="">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
        <li class="item item-toggle">
            CSS3
            <label class="toggle toggle-calm">
                <input type="checkbox" checked="">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
        <li class="item item-toggle">
            Flashplayer
            <label class="toggle toggle-balanced">
                <input type="checkbox">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
        <li class="item item-toggle">
            Java Applets
            <label class="toggle toggle-energized">
                <input type="checkbox">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
        <li class="item item-toggle">
            JavaScript
            <label class="toggle toggle-assertive">
                <input type="checkbox" checked="">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
        <li class="item item-toggle">
            Silverlight
            <label class="toggle toggle-royal">
                <input type="checkbox">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
        <li class="item item-toggle">
            Web Components
            <label class="toggle toggle-dark">
                <input type="checkbox" checked="">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
    </ul>
</body>

</html>

可以根据你需要的进行修改,我这只是最基本的绑定。其他请自行百度。

现在我们的会员登录就完成了。

图片 5

     3.添加ssh密钥

 

图片 6

参考资料:《菜鸟教程》

第一步添加密钥,会让你下载一个文件到本地(勿删,登录xsheel和xftp用到)然后进行绑定主机(主机需要在关机的状态下进行绑定)

    4.安全组(这个貌似没有关系,因为我不记得我安全组是不是自己设置的
也没有百度
我点开安全组就有一条记录在了。。如果在服务器搭建过程中有问题,可以百度这方面的只是。看是不是这里的问题,因为我没在这出现过问题
我也不好说。。)

   5.登录xshell6和xftp6

     xshell6:搭建服务器的时候需要的终端管理系统
xftp这里的作用是有的时候需要你在自己的系统下载linux 需要的压缩包
然后传输到linux系统中。可以借助xftp

xshell6登录 主机为你的外网ip

图片 7图片 8用户名一般都是root
密码由于我们之前设置了密钥
所以使用密钥登录,浏览选中之前设置密钥让你下载的密钥文件
导入即可。点击确定就登录成功了

      xftp的登录一样

图片 9

     6.安装jdk

       
参考文档:

    7.tomcat 安装

     
 参考文档:

                     
 

     tomcat 和
jdk的安装我就是按照上面的文档进行安装了,所以大家访问人家的博客就可以了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注