2019-09-23
Using Vue CLI3 to build the basic structure of the project, push the code to the remote, there are two main problems
1. What does the @ sign mean in vue when import is introduced into the module path?
@ is equivalent to/SRC, avoiding cumbersome and error-prone relative paths
2. To use sASS syntax, you need to install sass-Loader and Node-sass
Refer to the link
9-24
Use secondary routing to complete the development of the navigation bar
1. The navigation bar component has a blank space between the top, left and right of the browser
body{
margin: 0;
padding: 0;
}
Copy the code2. How to adapt mobile phone screen reference links
3. How is THE CSS vertically centered
The method is not unique, here we use flex layout, plus align-items: center; attribute
Horizontal center uses context-content: center; attribute
display: flex;
align-items: center;
justify-content: center;
Copy the codeThis code allows the element to be centered horizontally and vertically
September 25
The main problems encountered are
1. Introduce rotating images
This is fine in templates:
<img src=".. /.. /imgs/c3.png" />
Copy the codeBut if I extract the address and put it in data, I can’t refer to it:
<img :src="img3" >
Copy the codeexport default {
data() {
return {
img3: '.. /.. /imgs/c3.png'}}}Copy the codeThe solution
1) Write in template is not wrong, because you already have template image parser, need import in JS
2) It will be packaged by Webpack in the template, so it is ok. If you want to do this, you can either put the image in the outermost static folder or import it using import or require
import img3 from '.. /.. /imgs/c3.png'
Copy the codeor
const img3=require('.. /.. /imgs/c3.png')
Copy the codeReference variables in data
export default {
data() {
return {
img3:img3
}
}
}
Copy the codeThis is what happens when you introduce path packing directly into the template
Refer to the link
2. There are two problems here
Numbers or English numbers outside the specified area do not wrap, while Chinese does. Word-wrap :break-word; word-wrap:break-word; word-wrap:break-word; White-space: nowrap;
Float: float: float: float: float: float: float: float: float: float: float: float: float: float: float: float: float: float
<div style="clear:both;"></div>
Copy the codeRefer to the link
9-26
The body tag in app. vue is scoped only for the current component
There is no problem running the page, but the control console has reported an error
2. Components and ginseng segmentfault.com/a/119000001…
3. Remove the default color of the text input box border and mouse click
outline: none;
border: none;
Copy the codeToday’s summary
Today, I basically wrote code in the dormitory for a whole day, and preliminarily completed the layout and style of all articles and message pages. Because of the code master is not skilled, the foundation is not solid. Many of the problems encountered are found to be quite basic when they are solved. App.vue does not only display <router-view></router-view>, which was mistakenly thought that only routes with path/can be accessed through this tag. A nav. vue is shown as a level 1 route, and the navigation bar is a level 1 route, so all pages jumped through the navigation are level 2 routes. And then today I looked at the code that I learned before, the navigation bar can be put in app. vue, the code of nav. vue can be put in app. vue, and then I changed the routing table, the original level 2 route becomes level 1 route. Delete nav. vue.
Then app. vue set the body to change the background color. It didn’t work. Or which practice code to test before, found no problem, after repeated examination revealed is the < style > tag scoped attributes, scoped attributes the style only come into force in the current component, accustomed to add this, but all components before here to remove this property.
The component “Focus on me” module on the right, only prepared 4 columns before, using flex layout, today I thought that more ICONS may be placed in the future, as shown in the network layout, designed 8 columns, two lines and four columns, the following code
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows:90px 90px;
Copy the codeFour columns are 25% wide and two rows are 90px high.
Context-content, like align-items, only works with Flex layouts, with text-align for horizontal text and line-height for vertical center text.
<router-view></router-view> does not need to add this class name
Using variables to refer to attribute values is handy when the value needs to be used multiple times and is not easily written by hand.
$rgbcolor:rgb(231, 72, 81) ! globalCopy the codeBorder-radius can have one to four values, one for each of the four corners, and two values: the first value is the upper left corner and the second value is the upper right corner. The three radius values are: the upper right corner of the upper left corner and the lower right corner of the lower left corner. The four radius values are: upper right corner lower right corner lower left corner (clockwise);
border-radius:60px/40px;
Note: these two radii represent the horizontal and vertical radii respectively
The input tag and textarea input fields can have no border, and the attribute is border: None; When the mouse clicks in, you can set the border to a slightly blue color by default
border: none;
Copy the codeYou can also specify border as another value in input:focus{}. Set the inside margin to move the cursor
Using the min-width attribute with width=100%, using the Element-UI image-upload component to upload an avatar, etc., also took some effort
Let’s call it a day. Quiet night, good night!
9-27
Route redirect back to top of page, official website
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
Copy the codeCursor :pointer;
Display: None; display:none; Use pseudo classes :hover, display to block when mouse over
However, Element-UI provides a better solution, which is to use Tooltip text to prompt components
The appliance name slot distributes the Content instead of the Content property in the tooltip. <el-tooltip placement="top">
<div slot="content"</div> <el-button>Top center</el-button> </el-tooltip>Copy the codeImport SCSS files
@import "@/components/scss/detail.scss"
Copy the codeRouting and the cords
goDetail(val) {
this.$router.push({
name:'/Detail',
params:{
article:val
}
})
}
Copy the codeTake ginseng
article:this.$route.params.article
Copy the codeToday’s summary
Complete the basic layout and style of the article details page
9-28
The innerHTML changes the page div element reference, which is used by the tip function
Today’s summary
The tipping function uses the Element UI’s popup component to pop up a button, then uses innerHTML to switch between alipay and wechat qr codes, initially thinking it was done using a route, but failing. Behind to found a better way to accomplish this, is to use the binding class to do this, set the Boolear variable in the data, by clicking on the button to change the Boolean value, in: class three expression used to choose to render style, button is selected and not selected style is to produce a desired effect with as this switch. And through the display: none; You can achieve explicit and implicit state of the content, but also does not occupy the original location. In this way, the same place, click on different buttons, display different content. The switch between registration and login is implemented in this way.
I used the Form component of Element UI for login and registration. The form verification in the form component also took a lot of trouble, and the blank space input also passed the verification. Fortunately, the component provided regular expressions. Comments components encapsulation, again to the user input to submit comments content (only encapsulates the comments show module) before login and registration are encapsulated into the comment component, this message page and article details page can direct reference, thus increasingly think vue component development that was fantastic, improve performance aside, the main is convenient and lazy, Don’t write if you can copy and paste, and don’t copy and paste if you can quote directly. I believe this is the heart of most developers, hahaha
September 29
Today’s summary
Because most of the functions are already there, there are basically no additional functions added, just to deal with some details. Use ali Cloud icon library to add ICONS to the page, add the function of limiting the number of words in the comment input box, here is still stuck for a while, combined with the maxLength attribute of the input box element (input or Textarea) and vue watch to monitor the change of attribute value, of course, there are many ways to implement. I used what I thought was the simplest one, inspired by the following code
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="items.text" ref="count"/>
<div v-html="number"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
number: '100',
items: {
text:' '},}, watch:{// Watch () listens for a change in a value (two-way binding) to achieve the effect of change events. Items :{handler:function(){ var _this = this; var _sum = 100; // Limit font size to 100 _this.$refs.count.setAttribute("maxlength",_sum);
_this.number= _sum- _this.$refs.count.value.length;
},
deep:true}}}) </script> </body> </ HTML > -handle is the method that you need to execute in your watch. In the options parameter, specify immediate:trueThe callback is immediately triggered with the current value of the expressionCopy the codeBut I think mine is simpler and has less code, as follows
<template> <div class="comment-content"> <div class=" placeholder" Maxlength =" maxlength "></textarea> <div class="len"> You can also enter {{len}} words </div> </div> </template> <script> export default { data() { return { textarea:'', maxLength:150, len:150 } }, watch:{ textarea(){ this.len=this.maxLength - this.textarea.length } } } </script>Copy the codeThe result is as follows
The second problem was solved: jumping from the list of articles to the detailed page of the article through the route carried data normally renders the data, but when the browser is forced to refresh, the data disappears and the console reports an error with undefined properties. In the process of solving this problem, the first problem is the use of localStorage and skilled, after all, it is their first time to use, before it is seen that others have used, the following is what I know so far
For browsers, using Web Storage to store key values compared to store cookies is more intuitive, and the capacity is larger, it contains two types: localStorage and sessionStorage. Note :sessionStorage and localStorage are used in the same way. To convert a reference value to JSON (json.stringify ()), json.parse () is required
save
// object const info = {name:'hou', age: 24, id: '001'}; // String const STR ="haha";
localStorage.setItem('hou', JSON.stringify(info));
localStorage.setItem('zheng', str);
Copy the codeTo obtain
var data1 = JSON.parse(localStorage.getItem('hou'));
var data2 = localStorage.getItem('zheng');
Copy the codedelete
/ Delete a certainlocalStorage.removeItem('hou'); // Delete alllocalStorage.clear();
Copy the codeViewing in a browser
The localStorage validity period is permanent. The average browser can store about 5MB. SessionStorage API is the same as localStorage. The default sessionStorage validity period is the browser session duration (i.e. the TAB disappears after closing). The localStorage scope is the protocol, host name, and port. The sessionStorage scope is window, protocol, host name, and port.
With this knowledge, your problems are easily solved. LocalStorage is on the window. So you don’t need to write this.localStorage. If you write this in vue, it refers to the vue instance. complains
reference
2) The problem of using localStorage is solved, so what should we do next? In fact, the implementation idea is quite simple, but I did not think of it at the beginning. Define a method in methods
methods{{
setArticleData() {
var is = this.$route.params.article === undefined
if (is) {
console.log(is+'If I'm going to go here.')
var d=JSON.parse(localStorage.getItem('data'))
console.log(d)
this.article = d
} else {
console.log(is+'The first time the route comes in, else is here.')
this.article = this.$route.params.article
localStorage.setItem('data',JSON.stringify(this.$route.params.article))
}
}
}
Copy the codeMounted () or created(), which are vUE lifecycle functions that are executed when a Vue instance is created
created() {
this.setArticleData();
}
Copy the codeThe code should be easy to understand, no need to explain too much, everything is in the code
9-30
To summarize, there are three ways to successfully load an image from a template in a Vue file.
The first option is to place the image in a public directory (vue-cli2 is static). The files in this directory will be copied to the final package directory unchanged. SRC can be referenced directly in templates.
The second option is to first require or import images (outside of export Default in script tags), then define variables to receive in data, and finally bind the SRC variable to SRC in the template
The third way is if you refer to the web image reference link directly in the template SRC
Today’s summary
In the morning, I tried to change the element UI of the project from the original full introduction to on-demand introduction, but I encountered various problems and finally failed. And to understand the current mobile UI framework based on VUE, combined with the needs of this project and the popularity of the framework, the number of components, whether the development document is friendly, the framework update time, etc., the final choice of Vant framework, used to make the mobile style of the project.
In the afternoon, I mainly wrote the style of the home page on the mobile terminal, using media query. In order to facilitate the extraction of all vUE files from the PC terminal into a separate SCSS file, the style of the mobile terminal was also written in another separate SCSS. The home page uses the Popup component of the Vant framework to realize the side navigation bar.
10-1
The router-link tag does not have the to property control
Since the img tag is an inline-block element, the translation is called inline block elements, while margin:0 auto only works with block elements, called block elements or block-level elements. Another common block element is inline, called inline, inline, inline, and so on. The inline elements determined by open the content of elements, element size, wide high properties can not be set, left and right padding set can work alone, but the padding up and down, up and down or so from the outside set alone doesn’t work, unless the inline elements content, or at least one of the set the left and right padding attributes and attribute values are not zero
Today’s summary
Today, National Day, I wrote a day of code to celebrate the 70th anniversary of the founding of our new China. Using Vant components to the mobile end of the login and registration box redesigned to better adapt to the mobile phone screen, is also the use of Vant components to add drop-down refresh animation and the home page of the wheel, to improve the user experience
10-2
Today’s summary
Today, I added the name of the website “Nightfall” in the upper left corner of the PAGE on the PC side. It is actually a PNG image generated by a website, which is not visible on the mobile side. Clicking all positions of the image will change the background color of the website. Because other routing jump pages are rendered in the App. The vue of < the router – the view > < / router – the view >, App. The outermost layer of the vue page container binding class, by modifying the value of a Boolean variable isNight to load a different class, give the font image and click on the event, All the triggered function does is modify the Boolean variable.
There is a problem, however, that the text input box for the user’s comments in the comment. vue component has its own default background color (probably due to the textarea tag attribute inline-block element) and needs to be changed separately. You need to pass the Boolean variable through routing parameters and component passing data, and then use the variable to determine the class to load, just like app.vue. First, the isNight variable of app. vue is jumped to the Home page through route carrying parameter, and then the Home page passes the data receiving data to the Article component (Article list). When clicking the sub-item of the Article list, the isNight variable of app. vue is jumped to the Detail page through route carrying parameter. The Detail page then passes the received isNight variable to the Comment component, which receives the variable and makes a judgment. Well, that’s it. But when in the article details page or message page, click on the switch the background color of text input box does not change color, or keep the original color, the reason is that App. IsNight vue change a variable’s value is not passed, need to go to the home page to open the page will change color, so I’m here no matter where you click to switch the background color, Will automatically jump to the home page. There is no better solution, so let’s leave it at that.
10-3
Today’s summary
The function of switching background color is also added to the mobile phone, and ICONS are added to the side popbox. The article content displayed in the article list is only partially captured and displayed, and the border shadow effect is added. Extract the value of the variable for media queries based on screen size, put it in a var.scss file, and import it wherever the variable is used. Originally wanted to make a configuration into global variables, so that there is no need to introduce this file every time, but felt a little trouble, given that there are not many files in this project, simply gave up.
10-12
Web pages are slow to open for the first time, and single-sided apps are not SEO friendly. So I started using Nuxt.js to transform the project from client-side rendering to server-side rendering. A number of issues were encountered during the project’s migration to nuxt.js.
1) Development tools abandoned HbuilderX in favor of WebStorm because WebStorm is friendly to code prompts. Operation is similar to IntelliJ IDEA. The compiler reported an error in WebStorm referencing images this way, although it did not affect the operation
10 to 13
NPM install has been reporting errors, the main reason may be nod-sass installation error, can only try to install Taobao image will rely on one download down, successfully solved
Install Taobao image
npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the codeInstall Node-sass using Taobao image
cnpm install node-sass --save
Copy the code3) NuXT route parameters can be transmitted
<nuxt-link :to="{name:'detail',params:{article:item,isNight:isNight}}" ></nuxt-line>
Copy the code4) Route activation class
nuxt.config.js
router: {
linkExactActiveClass: 'exact-active-link'
},
Copy the codedefault.js
.exact-active-link{
background-color: rgb(255, 251, 240);
border-top: 5px solid rgb(247, 120, 37);
}
Copy the codeIn SSR, the Created lifecycle is executed on the server. Node does not contain localStorage, so an error is reported. In Mounted, the code that needs to use localStorage is added to the browser lifecycle.
6) Use third-party frameworks
6.1) Install through NPM
npm i vant -S
Copy the code6.2) Create a new file in the plugins directory
plugins: [
// '@/plugins/element-ui'
{
src: '~plugins/element-ui',
ssr: true,
},
{
src: '~plugins/vant',
ssr: true,}],Copy the code
10-14
1) To call route parameters in js, use this
npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the codeCreate a soft link for global access
ln -s/ root/node - v10.14.2 - Linux - x64 / bin/CNPM/usr /local/bin/
Copy the code3) Component export default code is removed
about.js
const img = require('.. /imgs/c5.png')
export default {
name: "about".data() {
return {
msg: "Hello Hello world",
img:img
}
}
};
Copy the codeabout.vue
<script>
import about from ".. /assets/js/about";
exportdefault { ... about } </script>Copy the code4) explore publicPath: process. The env. Use BASE_URL
export default {
data() {
return {
publicPath:process.env.BASE_URL
}
}
}
Copy the code<img :src="`${publicPath}favicon.ico`" alt="">
<img :src="this.publicPath+'favicon.ico'" alt="">
Copy the code5) Vant doesn’t work
import 'vant/lib/index.css';
Copy the code
Today’s summary
Modify and optimize the code for mobile. Mysql > create 11 mysql database tables with SQLyog
10-15
1) Mybatis -generator will not generate code from a table if the table has no primary key. 2) IntelliJ IDEA shortcut keys Ctrl+Alt+ H can open the window to the place where the method is called. Alt+ S opens the view to see a list of all the methods in the class, making it easy to find the method quickly. Alt+Home to expand the navigation directory. Ctrl+Alt+T creates the test class. Ctrl+Alt+ M to expand Maven. One summer vacation did not use IntelliJ IDEA to write code, shortcut keys have forgotten a lot.
Today’s summary
Start to build the development environment and project structure, use IntelliJ IDEA to create the SpringBoot project, use MyBatis to operate the database, use Swagger to automatically generate interface documents, use MyBatis -Generator to generate part of the code from the table, configure the cross-domain, Except for comments, the interfaces for information displayed on other websites have been roughly completed. In terms of interaction, such as comments, comments, likes, uploading pictures, etc., these functional interfaces have not been written yet. The login interface is almost ready.
10 to 16
10 to 17
10 to 18
1) Res cannot be repeated
_that.$emit('func'.false)
Copy the codeThe parent component receives and executes this way
<Register @func="getMsgFormSon"></Register>
Copy the codeGetMsgFormSon is a method in the parent component that does not require () and arguments
3) The parent component calls the child component’s methods
<button @close="close">
<login ref="login"/>
</button>
Copy the codeclose() {
this.$refs.login.resetForm('ruleForm2');
}
Copy the codeResetForm () is the method in the child component, and ‘ruleForm2’ is passed as an argument
4) Add data to the beginning of array by unshift()
array_object.unshift( newelement1, newelement2, ... )
Copy the codeAppend to the end of the array by pushing ()
array_object.push( newelement1, newelement2, ... )
Copy the code5) Add object data to localStorage can be retrieved from the array, and then add data, and then string reset can be set
var art = JSON.parse(localStorage.getItem('data'))
art.comments.unshift(res.data.data)
localStorage.setItem('data', JSON.stringify(art))
Copy the code10-19
1) When loading the home page, the detailed information of each article has been passed back through the background interface. When entering the article details page, the detailed information of the article is brought to the past through routing, and then the page is directly rendered, without the need to initiate network request background data again. However, it also brings inconvenience to data update and transmission. For example, when you like or add comments to an article, the number of likes, comments and comment information are not updated to the current page in time, and the original data is still displayed. You need to switch to another page to refresh the latest data, which is what you do when adding comments
The current page jumps to the/Refresh page, which can be blank
this.$router.replace({
path: '/refresh',
query: {
t: Date.now()
}
})
Copy the code/refresh page To switch to the previous page
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
Copy the codeThis allows for a page refresh, of course, with a small jump and a blank page, but it’s the best solution imaginable so far
2)
Cannot read property 'length' of undefined
Copy the codeOn the detail page, pass the array length to the Comment component. The Comment is received as props, and the properties in the props can not specify the type of props: {num: }, sometimes specifies that the page will display normally but the control console keeps reporting errors after several types are tried and no one knows why
Invalid prop: type check failed for prop "num". Expected Number with value 0, got String with value "".
Copy the code3) The interfaces for submitting comments and calling messages are different, but both the detail page and the message page use the Comment component. How can you click the same button to call different interfaces? I don’t have a solution here, but I came up with the idea of clicking on different buttons to trigger different click events to call different interfaces
<el-button class="say" type="danger" @click="subMsg"
v-show="aId===undefined"</el-button> <el-button class="say" type="danger" @click="subCom" v-show="aId! ==undefined"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the codeThe corresponding button can be hidden by whether the aId(article ID) of the page loading the Comment component is undefined. Undefined means the message page, and undefined means the article details page. Coupled with v – show commands can realize needs 4) articles comment and have such a need: not have login user within each comment or reply button, if the logged in user comment/is the users themselves, displayed a delete button, only himself can’t reply, if the comment/reply not only show the button.
<div class="reply">
<span v-show="item.aId! ==undefined&myinfo.userId===item.uId" @click="removeCom(item.cId)"<span > <span v-show="item.aId===undefined&myinfo.userId===item.uId" @click="remove(item.mId)"<span > <span v-show="item.aId! ==undefined&myinfo.userId! ==item.uId" @click="reply()"<span > <span v-show="item.mId! ==undefined&myinfo.userId! ==item.uId" @click="reply()"</span> </div>Copy the code5) Delete comments after adjusting the interface, I went to a page and came back again. The latest data was not refreshed. I checked the background and database and confirmed that the operation was successful, but the deleted data was still displayed on the page. The reason is that the traversal of article comments and display is implemented in the Comment component, while the data is transmitted through the details page. When leaving the details page and entering again, it gets the data from localStorage, which has been saved when entering the details page for the first time. Data is stored in localStorage, because the route jumps in by the following way
:to="{name:'detail',params:{article:item}}
Copy the codeThis way of routing with the cords jump page won’t carry on the data displayed in the address bar, the disadvantage is that when forced to refresh the page or F5, page and the data in order to solve this problem, don’t change the way of routing jump with the cords, I thought of the data stored in localStorage, when through routing into details page, Page routing with the data, so uncertain, because enter other pages and then enter the data or localStorage, it should be said that when the data carried by the route meets the conditions, take the data with the route, do not meet the conditions, take data from localStorage, see the following line of code
var is = this.$route.params.article === undefined
Copy the codeWhen the condition is satisfied
this.article = this.$route.params.article;
Copy the codeWhen the conditions are not met, such as F5, the page retrieves data from localStorage
let d = JSON.parse(localStorage.getItem('data'))
Copy the codeThis should explain why the latest data is not displayed on the page because it is still fetching data from localStorage. Now that we know this, we modify the data in localStorage before performing a page refresh
var art = JSON.parse(localStorage.getItem('data'))
art.comments.forEach((item, index) => {
if (item.cId === id) {
art.comments.splice(index, 1)
localStorage.setItem('data', JSON.stringify(art))
}
})
Copy the code10-20
Today, I have reformed the login and registration pop-up box on the mobile terminal. In order to better call interface, parameter transfer and user experience, although the UI is not pretty, I will slowly optimize it later when I have time, but the main functions are available. Because the mobile terminal uses the Vant framework, the popboxes such as registration, login, user information, password change and the forms in them need to be re-written, and the forms carry out the double verification of the front and back ends
10 to 21
Conduct front-end page development and call interface for password change on mobile terminal, encapsulated in a component named NewPass and used in the Comment component. The entry for password change is on the Login component. When the “forget password” button is clicked, the Login component transfers data to the Comment component. The data of the Comment component is transmitted to the NewPass component again, so as to meet the requirement of the login popup disappearing and password modification popup. When the password modification request is successful, the popup will automatically hide and then the login popup will automatically pop up. SetTimeout is used here to realize the delayed closing of the popup, after all, it is hoped that the switch between the two pop-ups is not too abrupt. At the same time, in order to wait for the prompt box to disappear, there will be a prompt for the success or failure of the operation. On the PC side, the component provided by Element UI is used, while on the mobile side, vant’s prompt component is used. Different buttons are clicked and different functions are called in the password change component on the PC side and the mobile side. But both of these functions call a method that encapsulates the AXIos request interface, the background returns a hint, the front end just does the presentation, and the front end does that by setting a Boolean variable using elment UI or Vant to provide the hint component
10-23
select count(*) from t_comment where to_days(c_time) = to_days(now()) and u_id=1 and a_id=1;
Copy the code2) Springboot scheduled task
@Component @Configuration //1. It is used to mark configuration classes and has the effect of a Component. @enablesCheduling public class SaticScheduleTask {//3. Add Scheduled tasks @scheduled (cron = Scheduled)"0 0-10 9 * *?") // Or specify the interval directly, for example: 5 seconds // @scheduled (fixedRate=5000) private voidconfigureTasks() {
System.err.println("Static scheduled task execution time:"+ LocalDateTime.now()); }}Copy the code10 to 25
1)js == and === difference (two equal signs and three equal signs) 2) filter
10-27
In the layout vue file, set the image as the background, the body setting does not work, the following Settings will work, zooming in and out of the browser will not change the background image
.container{ position: absolute; height: 100%; width: 100%; top:0; left: 0; overflow-y: auto; background-color: red; // background-image: url(".. /assets/imgs/banner1.jpg"); background-repeat:no-repeat; background-size:cover; }Copy the code10-29
1) Div height takes up the whole screen
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;type="text/css">
.main {
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: red;
}
</style>
</head>
<div class="main">
</div>
</body>
</html>
Copy the codeor
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-image: url(".. /public/images/bg.jpg");
Copy the code10 to 30
Conversion timestamp
filters:{
changeTime(value) {
var date = new Date(value);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + The '-' + m + The '-' + d+' '+h+':'+minute+':'+second; }}Copy the code2) JS + element-UI to achieve client-side paging
pageUtil() {
lettotalPage = 0; // Total number of pages // Total number of pagesif(this.allData.length/this.pageSize > parseInt(this.allData.length/this.pageSize)){
totalPage=parseInt(this.allData.length/this.pageSize)+1;
}else{
totalPage=parseInt(this.allData.length/this.pageSize);
}
letstartRow = (this.currPage - 1) * this.pageSize; // Start displaying line 31letendRow = this.currPage * this.pageSize; EndRow = (endRow > this.alldata.length)? this.allData.length : endRow; //40 this.tableData=this.allData.slice(startRow,endRow) },Copy the code3) Match multiple fields
select u.* from t_user u
where is_del=0
<if test="keyword! =null">
and concat(u.user_name,u.user_pass,u.phone_number) like '%${keyword}%'
</if>
order by u.register_time desc
Copy the code4) Make div fixed
position: fixed;
Copy the code5)sql
@Select("SELECT COUNT(*) FROM ${reply} WHERE ${pid}=#{id}")
Copy the code10-31
Java String converts to Timestamp
Timestamp timestamp = Timestamp.valueOf(time);
Copy the code11-1
Background management system basic add, delete, change and check function is roughly completed, including front-end page and back-end interface
11-2
1) The input box automatically gets focus by adding autofocus=”autofocus” after the input tag
2)
background-size: length|percentage|cover|contain;
Copy the codetransition: all .5s ease-in-out; z-index: 1;Copy the code3) Global front-facing route guard. If you visit any page without login, you will be redirected to the login page with parameters. If you login successfully, you will be automatically redirected to the page you want to visit before
4) Modify the login registration mode to replace element’s Dialog box with Element’s Drawer component to improve user experience
5) Use Element’s Card component to optimize the display of article list and set background pictures
6) Change the input tag placeholder style
The main point is to distinguish between different CSS classes in different browsers
You may want to set the input to a placeholder with different colors or other effects, so you can use the following code to style the placeholder.
Input ::-webkit-input-placeholder{} /* Browsers with webkit kernel */ INPUT :-moz-placeholder{} /* Firefox version 4-18 */ Input ::-moz-placeholder{} /* Firefox version 19+ */ INPUT :-ms-input-placeholder{} /* IE browser */Copy the codeNote 1: The colon is preceded by the corresponding input or Textarea element, etc. Note 2: placeholder properties are a new addition to css3. CSS selectors below IE9 and Opera12 do not support placeholder text. Such as:
input::-webkit-input-placeholder {
color: red;
font-size: 25px;
}
Copy the code7) How to change the input background color to transparent color
<input type="text" style="background-color:transparent">
Copy the code11-3
1) Make the background image scroll without the scroll bar
background-attachment: fixed;
Copy the code2) overflow – y: auto; It keeps the value of scrollTop at zero
Gets the distance of the element from the top of the window
let rt=document.getElementById('ri').getBoundingClientRect().top
Copy the code11-5
Add images to beautify the page
if (that.$route.query.redirect) {
that.$router.push({
path:that.$route.query.redirect
});
}else {
that.$router.push({
path:'/'
});
}
Copy the code