-
ArthurSlog
-
SLog-42
-
1 Year,
-
Through China,
-
Aug 19th 2018
-
GitHub
-
The nuggets home page
-
Jane books home page
-
segmentfault
The road to work is different and the path of life is made up of chance. What kind of chance do you want to have
Development Environment MacOS(High Sierra 10.13.5)
Required information and information sources:
-
Type of the CSS element box
-
HTML Demo:
-
CSS Demo: border
-
CSS Demo: border-radius
-
CSS Demo: padding
-
CSS Demo: margin
-
CSS Demo: width
-
CSS Demo: height
-
CSS Demo: object-fit
-
Installation and use of the style file precompiler Sass
-
Style file precompiler Sass guide
-
HTTP overview
-
HTTP
-
How does the Internet work
-
How does the Web work
-
Uniform Resource Locator (URL)
-
What is a hyperlink
-
Creating hyperlinks
-
AJAX is Asynchronous JavaScript And XML
-
XMLHttpRequest
-
Using files from web applications
Start coding
-
This implementation displays the default avatar after logging in
-
referenceHTML Demo:
, we update the HTML file
client/app.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<! -- Development environment version, including helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signin_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<template class="container" v-if="pagestate === '0'">
<div>This is index's page by ArthurSlog</div>
<br>
<button v-on:click="signin_index">Signin</button>
<br>
<button v-on:click="signup_index">Signup</button>
</template>
<template id="Signin" v-else-if="pagestate === '1'">
<div>This is signin's page by ArthurSlog</div>
<p>Singin</p>
<form id="form1" v-on:submit.prevent="signin">
<br>
<div>
Account: {{ name_signin }}
<br>
<input type="text" v-model="name_signin" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password_signin }}
<br>
<input type="text" v-model="password_signin" placeholder="password">
</div>
<br>
<input type="submit" value="Login">
</form>
<br>
<button v-on:click="return_index">ReturnIndex</button>
</template>
<template id="Signup" v-else-if="pagestate === '2'">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form id="form2" v-on:submit.prevent="addUser">
<br>
<div>
Account: {{ name }}
<br>
<input type="text" v-model="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" v-model="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" v-model="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" v-model="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" v-model="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" v-model="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" v-model="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" v-model="email" placeholder="[email protected]">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" v-model="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" v-model="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" v-model="phone" placeholder="138 * * * * * * * *">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" v-model="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" v-model="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" v-model="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="Complete registration">
</form>
<button v-on:click="addUser">addUser</button>
<br>
<button v-on:click="return_index">ReturnIndex</button>
<br>
</template>
<template id="returnResult" v-else-if="pagestate === '3'">
<div>
<img id="ArthurSlog_icon" src="/image/ArthurSlog.png" alt="ArthurSlog_icon" />
</div>
<div id="signinResult">
<div v-for="(value, key) in commits">
{{ key }}: {{ value }}
</div>
</div>
</template>
</div>
<script src="./js/signup.js"></script>
</body>
</html>
Copy the code- The updated sections are as follows:
client/app.html
<div>
<img id="ArthurSlog_icon" src="/image/ArthurSlog.png" alt="ArthurSlog_icon" />
</div>
Copy the code-
First, make an ID tag to the IMG, “ArthurSlog_icon”, for the following style adjustment
-
Next, switch to the Client folder path
cd client
- Create a new folder image to store image files
mkdir image
-
Download the image arthurslog. PNG into the image folder
-
Now, open your browser, type 127.0.0.1:3000/app.html, and click the Signin button
-
Enter account: ArthurSlog Password: ArthurSlog, click login, under normal execution, the default picture will be displayed
-
Next, we need to adjust the layout and positioning of the image
-
Open the SCSS file
clinet/css/style.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #ff0000;
body {
font: 100% $font-stack;
color: $primary-color;
}
#signup-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#signinResult {
display: flex;
flex-direction: column;
}
#signinResult > div {
background-color: #f1f1f1;
width: 300px;
margin: 5px;
text-align: left;
line-height: 50px;
}
#ArthurSlog_icon {
object-position: 50% 50%;
width: 300px;
object-fit: contain;
border: 1px solid rgb(171.255.216);
border-radius: 30px;
background-color: silver;
}
Copy the code-
The code above refers to the CSS documentation for W3schools, where we use the Flexbox property for positioning and layout, and to CSS Demo: Object-Position, where we use the Object-position property to center the image
-
The new code is as follows
#ArthurSlog_icon {
object-position: 50% 50%;
width: 300px;
object-fit: contain;
border: 1px solid rgb(171.255.216);
border-radius: 30px;
background-color: silver;
}
Copy the code- Now switch to the CSS folder path
cd client/css/
-
Now, we will use the Sass precompiler (which is basically a piece of code, a program) to convert Sass files into CSS files
-
Sass Sass file name CSS file name
sass style.scss style.css
- The SCSS file is now converted to a CSS file with the following result:
client/css/style.css
body {
font: 100% Helvetica, sans-serif;
color: #ff0000;
}
#signup-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#signinResult {
display: flex;
flex-direction: column;
}
#signinResult > div {
background-color: #f1f1f1;
width: 300px;
margin: 5px;
text-align: left;
line-height: 50px;
}
#ArthurSlog_icon {
object-position: 50% 50%;
width: 300px;
object-fit: contain;
border: 1px solid #abffd8;
border-radius: 30px;
background-color: silver;
}
/*# sourceMappingURL=style.css.map */
Copy the code-
Now, open your browser, type 127.0.0.1:3000/app.html, and click the Signin button
-
Enter account number: ArthurSlog Password: ArthurSlog, click login, under normal execution, the default picture will be displayed and displayed in the center
-
At this point, we have laid out and positioned the default avatar.
Please follow my wechat account ArthurSlog