SpringCloud + Vue video management system Chapter 4
Section 1. Creating Vue Cli files
This is a front-end vue + back-end Spring project. Now use vue to create front-end files.
First install NodeJS and dial this page in IDEA.
If it is different, you can enter terminal under Settings, find the following page, and change the shell path to bash Exe. (find your git installation directory)
Check whether nodejs is installed on the command line:
npm -v
If you do not want to install or upgrade, you can use this command:
npm install -g @vue/cli
Next, install the admin project of vue cli:
vue create admin
Then select this option of the first vue 2 (up and down key switching)
Just wait for execution.
Then run the following two lines to start the project:
cd admin npm run serve
Click the address, and the page above will appear.
Many files were generated.
- gitignore is a git related file
- main.js is the main startup program
- package.json and pack lock JSON is similar to maven's pom file
- index.html is the starting page
index. In HTML:
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Here is a div tag named app.
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
The rendering is app Vue this page.
That is, main JS rendered app Vue this file and put it in index HTML in this initialization page.
vue files are generally composed of three parts, such as app vue file:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
The first is the template, which puts some static pages; The second is script, which is used to store data and methods; The third is style, that is, to put the rendered css and other code.
Finally, submit the code.
Section 2. ace template integrating Bootstrap
Download the Bootstrap template from the Internet GitHub - bopoda/ace: Twitter bootstrap 3 admin template , and then introduce it into the public folder, named ace.
1. Set login page style
The login page is login HTML, integrate this page into the project.
I analyzed index Html is the initialization page of the page, so put the login.html of ace template Some functions of HTML are introduced into the index of the project html.
Close the label and import it all into index HTML.
Then, some script tags are introduced to close the second layer of the body, as shown in the following figure. The part circled by the red line is to be introduced.
So finally index Html is like this.
<!DOCTYPE html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Login Page - Ace Admin</title>
<meta name="description" content="User login page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- text fonts -->
<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-part2.min.css" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
However, the corresponding path cannot be found. You also need to match the path of these css and js files with the project path.
You can take a look at the original index There is such a line in HTML. But we put index HTML has been modified.
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
The corresponding path is favicon under public ICO icon.
Then <% = base_ URL% > means public directory.
So you have to put index All css and js in the HTML file can be modified into the corresponding project file format according to this format. The code is as follows:
<!DOCTYPE html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Login Page - Ace Admin</title>
<meta name="description" content="User login page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%= BASE_URL %>aceassets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- text fonts -->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-part2.min.css" />
<![endif]-->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-ie.min.css" />
<![endif]-->
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="<%= BASE_URL %>ace/assets/js/html5shiv.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/respond.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="<%= BASE_URL %>ace/assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="<%= BASE_URL %>ace/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The above can be replaced by code, Ctrl + R.
Then find package JSON file, right-click and select Show npm Script.
Then click serve to start the project.
Wait for successful startup. Click in and find that the front-end index page becomes a little gray.
Submit code.
2. Set login page content
Just some css and js styles were introduced before. ace has integrated many templates for us. We also need to introduce them into the login page, also from login HTML page.
It's still the second line of the previous body. This time, introduce this into index HTML, merge tags.
Because app Vue is used to load index HTML content, now introduce this tag to app In the Vue file. App. The HelloWorld component in Vue is not needed. It can be deleted and the app Delete the style of Vue.
The code is as follows:
<template>
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="center">
<h1>
<i class="ace-icon fa fa-leaf green"></i>
<span class="red">Ace</span>
<span class="white" id="id-text2">Application</span>
</h1>
<h4 class="blue" id="id-company-text">© Company Name</h4>
</div>
<div class="space-6"></div>
<div class="position-relative">
<div id="login-box" class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header blue lighter bigger">
<i class="ace-icon fa fa-coffee green"></i>
Please Enter Your Information
</h4>
<div class="space-6"></div>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="Username" />
<i class="ace-icon fa fa-user"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="password" class="form-control" placeholder="Password" />
<i class="ace-icon fa fa-lock"></i>
</span>
</label>
<div class="space"></div>
<div class="clearfix">
<label class="inline">
<input type="checkbox" class="ace" />
<span class="lbl"> Remember Me</span>
</label>
<button type="button" class="width-35 pull-right btn btn-sm btn-primary">
<i class="ace-icon fa fa-key"></i>
<span class="bigger-110">Login</span>
</button>
</div>
<div class="space-4"></div>
</fieldset>
</form>
<div class="social-or-login center">
<span class="bigger-110">Or Login Using</span>
</div>
<div class="space-6"></div>
<div class="social-login center">
<a class="btn btn-primary">
<i class="ace-icon fa fa-facebook"></i>
</a>
<a class="btn btn-info">
<i class="ace-icon fa fa-twitter"></i>
</a>
<a class="btn btn-danger">
<i class="ace-icon fa fa-google-plus"></i>
</a>
</div>
</div><!-- /.widget-main -->
<div class="toolbar clearfix">
<div>
<a href="#" data-target="#forgot-box" class="forgot-password-link">
<i class="ace-icon fa fa-arrow-left"></i>
I forgot my password
</a>
</div>
<div>
<a href="#" data-target="#signup-box" class="user-signup-link">
I want to register
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</div>
</div>
</div><!-- /.widget-body -->
</div><!-- /.login-box -->
<div id="forgot-box" class="forgot-box widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header red lighter bigger">
<i class="ace-icon fa fa-key"></i>
Retrieve Password
</h4>
<div class="space-6"></div>
<p>
Enter your email and to receive instructions
</p>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="email" class="form-control" placeholder="Email" />
<i class="ace-icon fa fa-envelope"></i>
</span>
</label>
<div class="clearfix">
<button type="button" class="width-35 pull-right btn btn-sm btn-danger">
<i class="ace-icon fa fa-lightbulb-o"></i>
<span class="bigger-110">Send Me!</span>
</button>
</div>
</fieldset>
</form>
</div><!-- /.widget-main -->
<div class="toolbar center">
<a href="#" data-target="#login-box" class="back-to-login-link">
Back to login
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</div>
</div><!-- /.widget-body -->
</div><!-- /.forgot-box -->
<div id="signup-box" class="signup-box widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header green lighter bigger">
<i class="ace-icon fa fa-users blue"></i>
New User Registration
</h4>
<div class="space-6"></div>
<p> Enter your details to begin: </p>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="email" class="form-control" placeholder="Email" />
<i class="ace-icon fa fa-envelope"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="Username" />
<i class="ace-icon fa fa-user"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="password" class="form-control" placeholder="Password" />
<i class="ace-icon fa fa-lock"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="password" class="form-control" placeholder="Repeat password" />
<i class="ace-icon fa fa-retweet"></i>
</span>
</label>
<label class="block">
<input type="checkbox" class="ace" />
<span class="lbl">
I accept the
<a href="#">User Agreement</a>
</span>
</label>
<div class="space-24"></div>
<div class="clearfix">
<button type="reset" class="width-30 pull-left btn btn-sm">
<i class="ace-icon fa fa-refresh"></i>
<span class="bigger-110">Reset</span>
</button>
<button type="button" class="width-65 pull-right btn btn-sm btn-success">
<span class="bigger-110">Register</span>
<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
<div class="toolbar center">
<a href="#" data-target="#login-box" class="back-to-login-link">
<i class="ace-icon fa fa-arrow-left"></i>
Back to login
</a>
</div>
</div><!-- /.widget-body -->
</div><!-- /.signup-box -->
</div><!-- /.position-relative -->
<div class="navbar-fixed-top align-right">
<br />
<a id="btn-login-dark" href="#">Dark</a>
<span class="blue">/</span>
<a id="btn-login-blur" href="#">Blur</a>
<span class="blue">/</span>
<a id="btn-login-light" href="#">Light</a>
</div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
At this time, you can find that the page does change.
But there are still problems with the corresponding style. We also need to delete or add styles, which is probably app There is a style in Vue and index Not in HTML.
login. There are several lines in HTML that set this style:
$('#btn-login-light').on('click', function(e) {
$('body').attr('class', 'login-layout light-login');
$('#id-text2').attr('class', 'grey');
$('#id-company-text').attr('class', 'blue');
e.preventDefault();
});
The current page is bright color, that is, BTN login light. When loading, you will add 'class' and' login layout light Login 'styles.
So now in app Vue also needs to be introduced.
<script>
$('body').attr('class', 'login-layout light-login');
export default {
name: 'App',
}
</script>
At this time, npm will automatically update for us. There may be some problems. Tips:
This is because vue automatically checks that there is no error, but if it is found that there is an error, it still cannot pass the compilation. In this case, you need to create one eslintrc.js file. (note that. Is. eslintrc.js at the beginning of the file). Fill in the file with the following code:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-undef': 'off',
'vue/no-unused-vars': 'off',
'vue/require-v-for-key': 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
};
Here, no undef: 'off' helps us turn off the check. At this time, restart npm and find that the login page format is normal.
Then modify the page content. This page is obviously different from our usual login page. We need to delete some functions and change the text into Chinese.
<template>
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="center">
<h1>
<i class="ace-icon fa fa-leaf green"></i>
<span class="">Console login</span>
</h1>
</div>
<div class="space-6"></div>
<div class="position-relative">
<div id="login-box" class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header blue lighter bigger">
<i class="ace-icon fa fa-coffee green"></i>
Please enter user name and password
</h4>
<div class="space-6"></div>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="Username" />
<i class="ace-icon fa fa-user"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="password" class="form-control" placeholder="Password" />
<i class="ace-icon fa fa-lock"></i>
</span>
</label>
<div class="space"></div>
<div class="clearfix">
<label class="inline">
<input type="checkbox" class="ace" />
<span class="lbl">Remember me</span>
</label>
<button type="button" class="width-35 pull-right btn btn-sm btn-primary">
<i class="ace-icon fa fa-key"></i>
<span class="bigger-110">Sign in</span>
</button>
</div>
<div class="space-4"></div>
</fieldset>
</form>
</div><!-- /.widget-main -->
</div><!-- /.widget-body -->
</div><!-- /.login-box -->
</div><!-- /.position-relative -->
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</template>
<script>
$('body').attr('class', 'login-layout light-login');
export default {
name: 'app',
}
</script>
Some content has been deleted here and the text has been changed into Chinese. The final style is shown in the figure.
Section 3 integrated Vue router routing
1. Set jump route
Vue router is mainly used to help jump to the page. We can use this Vue router to select which button to click or enter which URL to jump to which page.
First, terminal switches to the admin page.
cd admin
Then enter the command to install Vue router.
npm install --save vue-router
Next, use Vue router to create a new views folder under src under admin (the front-end page files written later are placed in this folder), and create login Vue is used as the login page, that is, the app Vue's code is cut intact. Then app Vue (or change app.vue to lowercase) can only introduce router view, and then it will automatically jump to the corresponding page according to the address.
<template>
<div id="app">
<router-view/>
</div>
</template>
In main Introduce router and app. JS Vue template.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
In order to realize page Jump, create router. In the src directory of admin JS file.
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '*',
redirect: "/login",
}, {
path: '/login',
component: Login
}]
})
In this way, when we visit the sub route with / Login at the end of the URL, we will match the Login component, and then in app Load the Login component in Vue. When we visit the sub route with * at the end of the URL, we will jump to the / Login sub route, which will still jump to the Login component. That is, if we enter an abnormal URL, we will automatically jump to the home page.
2. Create admin page
If we want to jump to the admin home page after logging in, we need to create an admin page and bind it as a component to a sub route.
Select blank here html. The template style is as follows:
Open blank HTML, the two most important of which are
. Too much code to write. Two div s with IDS "navbar" and "main container" are merged and copied.
Create another admin. In the views folder Vue front page. Imitate login Vue writes code. The code is a little long
<template>
<div>
<div id="navbar" class="navbar navbar-default ace-save-state">
<div class="navbar-container ace-save-state" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header pull-left">
<a href="index.html" class="navbar-brand">
<small>
<i class="fa fa-leaf"></i>
Ace Admin
</small>
</a>
</div>
<div class="navbar-buttons navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
<li class="grey dropdown-modal">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="ace-icon fa fa-tasks"></i>
<span class="badge badge-grey">4</span>
</a>
<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
<li class="dropdown-header">
<i class="ace-icon fa fa-check"></i>
4 Tasks to complete
</li>
<li class="dropdown-content">
<ul class="dropdown-menu dropdown-navbar">
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Software Update</span>
<span class="pull-right">65%</span>
</div>
<div class="progress progress-mini">
<div style="width:65%" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Hardware Upgrade</span>
<span class="pull-right">35%</span>
</div>
<div class="progress progress-mini">
<div style="width:35%" class="progress-bar progress-bar-danger"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Unit Testing</span>
<span class="pull-right">15%</span>
</div>
<div class="progress progress-mini">
<div style="width:15%" class="progress-bar progress-bar-warning"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Bug Fixes</span>
<span class="pull-right">90%</span>
</div>
<div class="progress progress-mini progress-striped active">
<div style="width:90%" class="progress-bar progress-bar-success"></div>
</div>
</a>
</li>
</ul>
</li>
<li class="dropdown-footer">
<a href="#">
See tasks with details
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</li>
</ul>
</li>
<li class="purple dropdown-modal">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="ace-icon fa fa-bell icon-animated-bell"></i>
<span class="badge badge-important">8</span>
</a>
<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
<li class="dropdown-header">
<i class="ace-icon fa fa-exclamation-triangle"></i>
8 Notifications
</li>
<li class="dropdown-content">
<ul class="dropdown-menu dropdown-navbar navbar-pink">
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">
<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
New Comments
</span>
<span class="pull-right badge badge-info">+12</span>
</div>
</a>
</li>
<li>
<a href="#">
<i class="btn btn-xs btn-primary fa fa-user"></i>
Bob just signed up as an editor ...
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">
<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
New Orders
</span>
<span class="pull-right badge badge-success">+8</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">
<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
Followers
</span>
<span class="pull-right badge badge-info">+11</span>
</div>
</a>
</li>
</ul>
</li>
<li class="dropdown-footer">
<a href="#">
See all notifications
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</li>
</ul>
</li>
<li class="green dropdown-modal">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
<span class="badge badge-success">5</span>
</a>
<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
<li class="dropdown-header">
<i class="ace-icon fa fa-envelope-o"></i>
5 Messages
</li>
<li class="dropdown-content">
<ul class="dropdown-menu dropdown-navbar">
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Alex:</span>
Ciao sociis natoque penatibus et auctor ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>a moment ago</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Susan:</span>
Vestibulum id ligula porta felis euismod ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>20 minutes ago</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Bob:</span>
Nullam quis risus eget urna mollis ornare ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>3:15 pm</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar2.png" class="msg-photo" alt="Kate's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Kate:</span>
Ciao sociis natoque eget urna mollis ornare ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>1:33 pm</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar5.png" class="msg-photo" alt="Fred's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Fred:</span>
Vestibulum id penatibus et auctor ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>10:09 am</span>
</span>
</span>
</a>
</li>
</ul>
</li>
<li class="dropdown-footer">
<a href="inbox.html">
See all messages
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</li>
</ul>
</li>
<li class="light-blue dropdown-modal">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
<img class="nav-user-photo" src="assets/images/avatars/user.jpg" alt="Jason's Photo" />
<span class="user-info">
<small>Welcome,</small>
Jason
</span>
<i class="ace-icon fa fa-caret-down"></i>
</a>
<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li>
<a href="#">
<i class="ace-icon fa fa-cog"></i>
Settings
</a>
</li>
<li>
<a href="profile.html">
<i class="ace-icon fa fa-user"></i>
Profile
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<i class="ace-icon fa fa-power-off"></i>
Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-container -->
</div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try{ace.settings.loadState('main-container')}catch(e){}
</script>
<div id="sidebar" class="sidebar responsive ace-save-state">
<script type="text/javascript">
try{ace.settings.loadState('sidebar')}catch(e){}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div><!-- /.sidebar-shortcuts -->
<ul class="nav nav-list">
<li class="">
<a href="index.html">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> Dashboard </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text">
UI & Elements
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i>
Layouts
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="top-menu.html">
<i class="menu-icon fa fa-caret-right"></i>
Top Menu
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="two-menu-1.html">
<i class="menu-icon fa fa-caret-right"></i>
Two Menus 1
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="two-menu-2.html">
<i class="menu-icon fa fa-caret-right"></i>
Two Menus 2
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="mobile-menu-1.html">
<i class="menu-icon fa fa-caret-right"></i>
Default Mobile Menu
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="mobile-menu-2.html">
<i class="menu-icon fa fa-caret-right"></i>
Mobile Menu 2
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="mobile-menu-3.html">
<i class="menu-icon fa fa-caret-right"></i>
Mobile Menu 3
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="typography.html">
<i class="menu-icon fa fa-caret-right"></i>
Typography
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="elements.html">
<i class="menu-icon fa fa-caret-right"></i>
Elements
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="buttons.html">
<i class="menu-icon fa fa-caret-right"></i>
Buttons & Icons
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="content-slider.html">
<i class="menu-icon fa fa-caret-right"></i>
Content Sliders
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="treeview.html">
<i class="menu-icon fa fa-caret-right"></i>
Treeview
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="jquery-ui.html">
<i class="menu-icon fa fa-caret-right"></i>
jQuery UI
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="nestable-list.html">
<i class="menu-icon fa fa-caret-right"></i>
Nestable Lists
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i>
Three Level Menu
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="#">
<i class="menu-icon fa fa-leaf green"></i>
Item #1
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-pencil orange"></i>
4th level
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="#">
<i class="menu-icon fa fa-plus purple"></i>
Add Product
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#">
<i class="menu-icon fa fa-eye pink"></i>
View Products
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> Tables </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="tables.html">
<i class="menu-icon fa fa-caret-right"></i>
Simple & Dynamic
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="jqgrid.html">
<i class="menu-icon fa fa-caret-right"></i>
jqGrid plugin
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-pencil-square-o"></i>
<span class="menu-text"> Forms </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="form-elements.html">
<i class="menu-icon fa fa-caret-right"></i>
Form Elements
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="form-elements-2.html">
<i class="menu-icon fa fa-caret-right"></i>
Form Elements 2
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="form-wizard.html">
<i class="menu-icon fa fa-caret-right"></i>
Wizard & Validation
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="wysiwyg.html">
<i class="menu-icon fa fa-caret-right"></i>
Wysiwyg & Markdown
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="dropzone.html">
<i class="menu-icon fa fa-caret-right"></i>
Dropzone File Upload
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="widgets.html">
<i class="menu-icon fa fa-list-alt"></i>
<span class="menu-text"> Widgets </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="calendar.html">
<i class="menu-icon fa fa-calendar"></i>
<span class="menu-text">
Calendar
<span class="badge badge-transparent tooltip-error" title="2 Important Events">
<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
</span>
</span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="gallery.html">
<i class="menu-icon fa fa-picture-o"></i>
<span class="menu-text"> Gallery </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-tag"></i>
<span class="menu-text"> More Pages </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="profile.html">
<i class="menu-icon fa fa-caret-right"></i>
User Profile
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="inbox.html">
<i class="menu-icon fa fa-caret-right"></i>
Inbox
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="pricing.html">
<i class="menu-icon fa fa-caret-right"></i>
Pricing Tables
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="invoice.html">
<i class="menu-icon fa fa-caret-right"></i>
Invoice
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="timeline.html">
<i class="menu-icon fa fa-caret-right"></i>
Timeline
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="search.html">
<i class="menu-icon fa fa-caret-right"></i>
Search Results
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="email.html">
<i class="menu-icon fa fa-caret-right"></i>
Email Templates
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="login.html">
<i class="menu-icon fa fa-caret-right"></i>
Login & Register
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="active open">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-file-o"></i>
<span class="menu-text">
Other Pages
<span class="badge badge-primary">5</span>
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="faq.html">
<i class="menu-icon fa fa-caret-right"></i>
FAQ
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="error-404.html">
<i class="menu-icon fa fa-caret-right"></i>
Error 404
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="error-500.html">
<i class="menu-icon fa fa-caret-right"></i>
Error 500
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="grid.html">
<i class="menu-icon fa fa-caret-right"></i>
Grid
</a>
<b class="arrow"></b>
</li>
<li class="active">
<a href="blank.html">
<i class="menu-icon fa fa-caret-right"></i>
Blank Page
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul><!-- /.nav-list -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">Home</a>
</li>
<li>
<a href="#">Other Pages</a>
</li>
<li class="active">Blank Page</li>
</ul><!-- /.breadcrumb -->
<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
</form>
</div><!-- /.nav-search -->
</div>
<div class="page-content">
<div class="ace-settings-container" id="ace-settings-container">
<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
<i class="ace-icon fa fa-cog bigger-130"></i>
</div>
<div class="ace-settings-box clearfix" id="ace-settings-box">
<div class="pull-left width-50">
<div class="ace-settings-item">
<div class="pull-left">
<select id="skin-colorpicker" class="hide">
<option data-skin="no-skin" value="#438EB9">#438EB9</option>
<option data-skin="skin-1" value="#222A2D">#222A2D</option>
<option data-skin="skin-2" value="#C6487E">#C6487E</option>
<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
</select>
</div>
<span> Choose Skin</span>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" />
<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
<label class="lbl" for="ace-settings-add-container">
Inside
<b>.container</b>
</label>
</div>
</div><!-- /.pull-left -->
<div class="pull-left width-50">
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
</div>
</div><!-- /.pull-left -->
</div><!-- /.ace-settings-box -->
</div><!-- /.ace-settings-container -->
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
<div class="footer">
<div class="footer-inner">
<div class="footer-content">
<span class="bigger-120">
<span class="blue bolder">Ace</span>
Application © 2013-2014
</span>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
</a>
</span>
</div>
</div>
</div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->
</div>
</template>
At the same time, in order to realize page Jump, in router JS rebinding components and sub routes.
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login.vue'
import Admin from './views/admin.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '*',
redirect: "/login",
}, {
path: '/login',
component: Login
},{
path: '/admin',
component: Admin
}]
})
At this time, npm helped us restart, but found an error because the above admin Vue contains
This is because login Vue introduces two css styles, which are not the css styles that admin needs to introduce. At this time, in admin You can modify the style in Vue and add a piece of code, that is, clear the style in login and add the style required by admin:
<script>
$('body').removeClass('login-layout light-login');
$('body').attr('class','no-skin');
</script>
At this time, it is found that the page is normal. But the style of the login page is not normal again. That's why.
This circular alternative css style is problematic.
3. Set login and admin jump
In other words, as shown in the figure above, when you click login, you will verify Username and Password and then log in. Of course, what you are doing now is just a fake login, that is, a simple jump function.
Find the login button above to add a click event. Click the login button to execute the login() function, which can be in the format of v-on:click = "function ()" provided by vue. Jump can use this$ router. The push () method to jump to an address.
Only the code for modifying the location is shown here. This is to add a click event:
<button type="button"
class="width-35 pull-right btn btn-sm btn-primary"
v-on:click="login()">
<i class="ace-icon fa fa-key"></i>
<span class="bigger-110">Sign in</span>
</button>
This is the logic for executing the jump page:
export default {
name: 'App',
methods: {
login(){
this.$router.push("/admin")
}
}
}
Submit code.
4. Page format problem
There is a legacy problem above, that is, when login and admin load one, they retain this style and modify the style code of the other, which will also have an impact when loading this part of the code. So how to solve it?
For the initialization style, vue mounted can be used to complete the initialization loading style function. The following figure should be familiar. Mounted is a hook function in the life cycle. It is executed after the interface rendering to help us complete the initialization function.
The login page needs the login layout light login style, and the admin page needs the no skin style. Then modify them in their respective codes.
login page:
<script>
export default {
name: 'App',
mounted: function () {
$('body').removeClass('class', 'no-skin');
$('body').attr('class', 'login-layout light-login');
},
methods: {
login(){
this.$router.push("/admin")
}
}
}
</script>
admin page:
<script>
export default {
name: 'App',
mounted: function () {
$('body').removeClass('login-layout light-login');
$('body').attr('class','no-skin');
},
methods: {
login(){
this.$router.push("/admin")
}
}
}
</script>
At this time, it is found that the page is normal.
Section IV development of console welcome page
1. Add welcome page subcomponent
If you want to log in to admin/welcome, you can display the welcome interface. It can be seen here that a new welcome component needs to be created under the admin route, indicating that it is a welcome sub component of the admin component. Router view is still needed here.
In order to better manage the created interface, create the admin subdirectory under views. Welcome code is needed here. Create a subfolder of welcome in the admin directory. Create welcome Vue file, the code is as follows.
<template>
<div>
<h1>Hello, welcome to the console</h1>
</div>
</template>
The router also needs to be registered, that is, add sub components under the Admin component. There is no "/" in front of welcome in the following code path.
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login.vue'
import Admin from './views/admin.vue'
import Welcome from './views/admin/welcome/welcome.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '*',
redirect: "/login",
}, {
path: '/login',
component: Login
},{
path: '/admin',
component: Admin,
children: [{
path: 'welcome',
component: Welcome,
}]
}]
})
Where? You need to go to admin Find the corresponding location in Vue and join. We want to add the welcome component in the blank space of admin, so Home is near it
Other Pages Blank Page these three elements can be searched.
Then look down and you can see the description of page content begins and page content ends. The route can be loaded here.
You can see this interface.
2. Interface adjustment
Remove some useless page elements.
Delete the breadcrumbs. Delete the following code from the admin page:
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">Home</a>
</li>
<li>
<a href="#">Other Pages</a>
</li>
<li class="active">Blank Page</li>
</ul><!-- /.breadcrumb -->
<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
</form>
</div><!-- /.nav-search -->
</div>
Search, settings and other elements are also deleted:
<div class="ace-settings-container" id="ace-settings-container">
<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
<i class="ace-icon fa fa-cog bigger-130"></i>
</div>
<div class="ace-settings-box clearfix" id="ace-settings-box">
<div class="pull-left width-50">
<div class="ace-settings-item">
<div class="pull-left">
<select id="skin-colorpicker" class="hide">
<option data-skin="no-skin" value="#438EB9">#438EB9</option>
<option data-skin="skin-1" value="#222A2D">#222A2D</option>
<option data-skin="skin-2" value="#C6487E">#C6487E</option>
<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
</select>
</div>
<span> Choose Skin</span>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" />
<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
<label class="lbl" for="ace-settings-add-container">
Inside
<b>.container</b>
</label>
</div>
</div><!-- /.pull-left -->
<div class="pull-left width-50">
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
</div>
</div><!-- /.pull-left -->
</div><!-- /.ace-settings-box -->
</div><!-- /.ace-settings-container -->
There are also some problems with these elements in the upper right corner. Because there are few js introduced here, the ace template index Relevant js in HTML are introduced, and the path is modified. The modified index The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Login Page - Ace Admin</title>
<meta name="description" content="User login page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- text fonts -->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-part2.min.css" />
<![endif]-->
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-ie.min.css" />
<![endif]-->
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="<%= BASE_URL %>ace/assets/js/html5shiv.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/respond.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="<%= BASE_URL %>ace/assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="<%= BASE_URL %>ace/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="<%= BASE_URL %>ace/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<!--[if lte IE 8]>
<script src="<%= BASE_URL %>ace/assets/js/excanvas.min.js"></script>
<![endif]-->
<script src="<%= BASE_URL %>ace/assets/js/jquery-ui.custom.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/jquery.easypiechart.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/jquery.sparkline.index.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/jquery.flot.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/jquery.flot.pie.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/jquery.flot.resize.min.js"></script>
<!-- ace scripts -->
<script src="<%= BASE_URL %>ace/assets/js/ace-elements.min.js"></script>
<script src="<%= BASE_URL %>ace/assets/js/ace.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
There are also pictures that are not displayed because the paths are inconsistent and because some jpg picture paths cannot match.
For example, this Jason picture is wrong. Then adjust the corresponding image path. Take an example:
<img class="nav-user-photo" src="../../public/ace/assets/images/avatars/user.jpg" alt="Jason's Photo" />
3. Delete useless elements
- Ctrl + R search Dashboard and change this text to welcome
- Under Dashboard
- The tag class is empty and modified to "active open", that is, expand it and delete many
- Label, the span below is changed to system management.
- It is renamed user management and permission management
<ul class="nav nav-list">
<li class="">
<a href="index.html">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> welcome </span>
</a>
<b class="arrow"></b>
</li>
<li class="active open">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> system management </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="tables.html">
<i class="menu-icon fa fa-caret-right"></i>
user management
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="jqgrid.html">
<i class="menu-icon fa fa-caret-right"></i>
Authority management
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul><!-- /.nav-list -->
The following can be modified or not.
<div class="footer">
<div class="footer-inner">
<div class="footer-content">
<span class="bigger-120">
<span class="blue bolder">Nail frog</span>
Online video course © 2099-2099
</span>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
</a>
</span>
</div>
</div>
</div>
The final style is as follows:
