• ArthurSlog
  • SLog-27
  • Year·1
  • Guangzhou·China
  • July 30th 2018

没有写够足够的代码量，想成为高手是不可能的，只能纸上谈兵，但写够了代码量，纸上谈兵的也是大有人在

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

  • Slog1_如何使用nodejs与mysql进行数据交互
  • Slog4_使用后端框架KOA实现静态web服务器
  • Slog6_使用vue前端框架实现单页应用(SPA)
  • Slog24
  • Slog25
  • Slog26
前端部分：
后端部分：
  • 数据库数据交互模块-部署、配置
  • 静态web服务器
  • 用户注册模块
  • 用户登陆模块
  • 统计分析模块
  • 用户状态模块-超时、无效、非法
  • ctx.redirect()，参考 webapi官方手册，获取到原始webpai中的api，koa框架中的ctx和原始webapi中的api一一对应，或者说是和原始webapi的request和response中的api一一对应

开始编码

  • 目前基本的注册登陆注册功能已经做出来了，但是页面比码农的脸还难看，接下来简单妆点一下，我们来写一下层叠样式表css（到目前为止，都是用比较原始的方法，菜鸟嘛，总得来一遍的）
  • 先看一下之前的主页的 html 文件：

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>index_ArthurSlog</title>

</head>

<body>

    <div>This is index's page by ArthurSlog</div>

    <a href="./signin.html">Signin</a>

    <br>

    <a href="./signup.html">Signup</a>

</body>

</html>
  • 我们在这里外链一下样式表 style.css

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./style.css" >

    <title>index_ArthurSlog</title>

</head>

<body>

    <div>This is index's page by ArthurSlog</div>

    <a href="./signin.html">Signin</a>

    <br>

    <a href="./signup.html">Signup</a>

</body>

</html>
  • 为了显得专业一点，我们在当前路径下建个新的文件夹“css”来放置样式表文件吧

mkdir css

  • 重新修改一下主页 html 文件

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./css/style.css" >

    <title>index_ArthurSlog</title>

</head>

<body>

    <div class="container">

    <div>This is index's page by ArthurSlog</div>

    <br>

    <a href="./signin.html">Signin</a>

    <br>

    <a href="./signup.html">Signup</a>

    </div>

</body>

</html>
  • 嗯，这样显得专业点了，分类管理，呵呵
  • 接下来切换到 css 文件夹路径下

cd css

  • 新建一个样式表文件 style.css，上面主页 index.html 引用的，就是这个文件，我们上面增加的，就是样式表文件相对于主页文件的路径，“./” 表示当前路径，所以正确路径的写法就是 “./css/style.css”
  • 好了，解释完，开始编码样式文件 style.css 了

styel.css

.container {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    height: 300px;

  }
  • 启动静态web服务器

node index.js

  • 打开浏览器，输入 127.0.0.1:3000，看一下，主页是否发生了变化，正常的话，内容已经居中了，这里给出 层叠样式表css官方手册，以后如果需要什么样式，就去这里找
  • 同样的，我们来为 signin.html 和 signup.html 添加一下样式，打开样式文件 style.css

style.css

.container {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    height: 300px;

  }

  .signin-container {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

  } 

  .signup-container {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

  }
  • 然后，调整一下 signin.html 和 signup.html 这两个文件

signin.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./css/style.css" >

    <title>signin_ArthurSlog</title>

</head>

<body>

    <div class="signin-container">

        <div>This is signin's page by ArthurSlog</div>

        <p>Singin</p>

        <form action="http://127.0.0.1:3000/signin" method="GET">

            Name: <br>

            <input type="text" name="name">

            <br>

            Password: <br>

            <input type="text" name="password">

            <br><br>

            <input type="submit" value="登陆">

        </form>

        <a href="./account.html">Signin</a>

        <br>

        <a href="./index.html">Return index's page</a>

    </div>

</body>

</html>

signup.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./css/style.css" >

    <title>signup_ArthurSlog</title>

</head>

<body>

    <div class="signup-container">

        <div>This is signup's page by ArthurSlog</div>

        <p>Singup</p>

        <form action="http://127.0.0.1:3000/signup" method="GET">

            Account: <br>

            <input type="text" name="name">

            <br>

            Password: <br>

            <input type="text" name="password">

            <br>

            Again Password: <br>

            <input type="text" name="repassword">

            <br>

            First Name: <br>

            <input type="text" name="firstname">

            <br>

            Last Name: <br>

            <input type="text" name="lastname">

            <br>

            Birthday: <br>

            <input type="text" name="birthday">

            <br>

            Sex: <br>

            <input type="text" name="sex">

            <br>

            Age: <br>

            <input type="text" name="age">

            <br>

            Wechart: <br>

            <input type="text" name="wechart">

            <br>

            QQ: <br>

            <input type="text" name="qq">

            <br>

            Email: <br>

            <input type="text" name="email">

            <br>

            Contury: <br>

            <input type="text" name="contury">

            <br>

            Address: <br>

            <input type="text" name="address">

            <br>

            Phone: <br>

            <input type="text" name="phone">

            <br>

            Websize: <br>

            <input type="text" name="websize">

            <br>

            Github: <br>

            <input type="text" name="github">

            <br>

            Bio: <br>

            <input type="text" name="bio">

            <br><br>

            <input type="submit" value="完成注册">

        </form>

        <a href="./form.html">Signup</a>

        <br>

        <a href="./index.html">Return index's page</a>

        <br><br>

    </div>  

</body>

</html>
  • 打开浏览器，输入 127.0.0.1:3000，看一下，主页是否发生了变化，点击 signin 和 signup，正常的话，他们的内容已经居中了
  • 至此，我们完成了主页、登陆页面、注册页面的样式居中。

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢

根据 mysql官方手册 修改数据库密码，先登陆mysql数据库，进入mysql命令行界面，输入

ALTER USER USER() IDENTIFIED BY '88888888';

Slog27_支配vue框架初阶项目之博客网站-样式居中的更多相关文章

  1. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  2. 学习SpringBoot，整合全网各种优秀资源，SpringBoot基础，中间件，优质项目，博客资源等，仅供个人学习SpringBoot使用

    学习SpringBoot,整合全网各种优秀资源,SpringBoot基础,中间件,优质项目,博客资源等,仅供个人学习SpringBoot使用 一.SpringBoot系列教程 二.SpringBoot ...

  3. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  4. 使用Phalcon框架开发一个简易的博客系统

    使用Phalcon PHP框架开发一个简易的博客系统(类似于CMS) 最近在做Phalcon(Phalcon在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚 ...

  5. 转载： 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  6. thinkphp5项目--个人博客（七）

    thinkphp5项目--个人博客(七) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  7. thinkphp5项目--个人博客（三）

    thinkphp5项目--个人博客(三) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  8. [对对子队]Beta阶段项目展示博客

    Beta阶段项目展示博客 1 团队成员的简介和个人博客地址 成员 头像 岗位 博客 个人介绍 黄贤昊 PM 17373253 喜欢玩游戏和做游戏,项目经验基本都和游戏相关,擅长摸鱼,偶尔敬业. 吴桐雨 ...

  9. 2015-2016-2 《Java程序设计》项目小组博客

    2015-2016-2 <Java程序设计>项目小组博客 1451 完+美 java项目 守望先疯 JavaGroup 07_10_20_22 FromBottomToTop L.G.Su ...

随机推荐

  1. PAT甲级——1036 Boys vs Girls

    1036 Boys vs Girls This time you are asked to tell the difference between the lowest grade of all th ...

  2. Spring Boot集成全局唯一ID生成器

    流水号生成器(全局唯一 ID生成器)是服务化系统的基础设施,其在保障系统的正确运行和高可用方面发挥着重要作用.而关于流水号生成算法首屈一指的当属 Snowflake雪花算法,然而 Snowflake本 ...

  3. FP-Grow树

    序言 FP-growth(Frequent Pattern Tree, 频繁模式树),是韩家炜老师提出的挖掘频繁项集的方法,是将数据集存储在一个特定的称作FP树的结构之后发现频繁项集或频繁项对,即常在 ...

  4. windows server 2008 r2配置NTP时间服务器

    windows server 2008做NTP服务器与H3C网络设备组网首先WINDOWS SERVER 2008默认是关闭NTP服务的,需要通过修改注册表开启方法如下:--------------- ...

  5. JarvisOJ level3_x64

    这一题是和前面x86的差不多,都是利用了同一个知识点,唯一的区别就是使用的堆栈地址不同,x86是直接使用堆栈来传递参数的,而x64不同 x64的函数调用时整数和指针参数按照从左到右的顺序依次保存在寄存 ...

  6. java基础之异常 · fossi

    在开发中,异常处理是一个不可绕开的话题,我们对于异常的处理已经非常熟练了,对于异常本身的概念.用法等不再赘述了,直接结合面试问题来加深对异常的理解吧. Throwable 可以用来表示任何可以作为异常 ...

  7. spring xml 注入 map 时 map 标签报错

    如图所示: 在XML配置文件中并没有问题,问题出在实体类,在类中属性 maps 用 Map定义即可,用HashMap定义就会出现如上错误 K-I-N-G-D-O-M

  8. 公式化学习requests（第一卷)

    个人来讲我不是很喜欢REQURST这个第三方模块,一点不好用不如URLLIB,但身为技术人员,模块你可以不用但是你得会,就像生活质量我这个东西我不用但是我得有 先拿百度做个案例: 看下代码 结果为: ...

  9. Linux Ubuntu 安装SSH服务

    1.安装SSH命令:sudo apt-get install openssh-server 2.启动SSH服务命令:/etc/init.d/ssh start 3.停止SSH服务命令:/etc/ini ...

  10. Jquery和js实现cookie操作手机浮层广告；附加：js获取、添加、删除cookie

    1.jquery cookie包实现手机上的浮层广告 <span style="font-size:18px;">$(document).ready(function( ...