前后端登录
流式布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流式布局</title> <style> .box { width: 800px; height: 200px; background-color: orange; /*页面宽度缩放，盒子始终居中*/ margin-left: auto; margin-right: auto; /*width: 80%;*/ /*vw: view width | vh: view height*/ /*width: 80vw;*/ /*width: 80vh;*/ } .sup { font-size: 40px; } .sub { /*font-size: inherit;*/ /*font-size: 1.5em;*/ /*width: 5em;*/ font-size: 2rem; } html { font-size: 30px; } </style> </head> <body> <div class="box"></div> <div class="sup"> <div class="sub">字</div> </div> </body> </html>
js函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js函数</title> </head> <body> <h1>js函数</h1> </body> <script> function fn1(a, b, c, d) { console.log(a, b, c, d); console.log('fn1 run'); } fn1(1, 2, 3); let fn2 = function (...args) { console.log(args); console.log(args[0]); console.log('fn2 run'); }; fn2(1, 2, 3, 4); (function () { console.log('fn3 run'); })(); let fn4 = () => { console.log('fn4 run'); }; fn4(); // 有参有反 let fn5 = (a, b) => { console.log(a, b); return a + b; }; let res = fn5(1, 2); console.log(res); // 箭头函数函数体如果只有返回值，可以简写 let fn6 = (a, b) => a + b; res = fn6(10, 20); console.log(res); // 当形参只有一个，可以省略() let fn7 = a => a * 2; res = fn7(10); console.log(res); // 当形参为空的简写方式 let fn8 = () => 200; res = fn8(); console.log(res); </script> </html>
面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象js</title> </head> <body> <h1>面向对象js</h1> </body> <script> class Student { constructor(name) { console.log('构造器调用了'); this.name = name; } study() { console.log(`${this.name}在学习`) } } let s1 = new Student('Bob'); console.log(s1.name); s1.study(); function Teacher(name) { this.name = name; this.teach = function () { console.log(`${this.name}在教学`) }; this.test = () => { console.log(`${this.name}-test`) } } let t1 = new Teacher('Tom'); console.log(t1.name); t1.teach(); t1.test(); // 可以理解为类属性，所有对象共有 Teacher.prototype.age = 10; Teacher.prototype.sleep = function () { console.log(`${this.name}在睡觉`) }; console.log(t1.age); t1.sleep(); let t2 = new Teacher('Jerry'); console.log(t2.age); t2.sleep(); // Vue.prototype.abc = 123; // let localTag = {}; // Vue.component('',{}); // new Vue({ // components: { // localTag // } // }); // function 与 箭头函数有本质区别 let h1 = document.querySelector('h1'); h1.onclick = function () { alert(this.innerText); console.log(this); }; h1.onclick = () => { alert(this.innerText); console.log(this); } </script> </html>
前后端登录
v-proj 前端
App.vue
<template> <div id="app"> <router-view/> </div> </template> <style> body,ul, h1{ padding: 0; margin: 0; list-style: none; } </style>
views/Login.vue
cnpm install axios
<template>
<div class="login">
<h1>登录页面</h1>
<hr>
<form action="">
<p>
<label for="username">账号：</label>
<input type="text" id="username" name="username" v-model="username">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password" v-model="password">
</p>
<button type="button" @click="login">登录</button>
</form>
</div>
</template>
<script>
export default {
name: "Login.vue",
data () {
return {
username: '',
password: '',
}
},
beforeCreate() {
// 查看localStorage中是否存在token(是否登录)，登录跳转主页
let token = localStorage.token;
if (token) {
this.$router.push('/')
}
},
methods: {
login () {
let username = this.username;
let password = this.password;
// console.log(username);
// console.log(password);
if (!(username && password)) {
alert('信息有误');
return false
}
// console.log(username);
this.$axios({
url: 'http://127.0.0.1:8001/login/',
method: 'post',
params: {
username,
password
},
}).then(response => {
// console.log('hi');
// console.log(response);
// console.log(response.data.status);
let status = response.data.status;
if (status === 0) {
alert('登录成功');
// 记录登录状态
localStorage.token = response.data.token;
localStorage.username = response.data.username;
// 跳转主页
this.$router.push('/');
} else {
alert('登录失败')
}
}).catch(() => {
alert('登录异常')
});
// 清空输入框
this.username = '';
this.password = '';
}
}
}
</script>
<style scoped>
.login {
text-align: center;
}
button {
/*display: block;*/
width: 220px;
}
</style>
views/Home.vue
<template>
<div class="home">
<div class="header">
<h1>主页</h1>
<span v-if="token">
<b>{{ username }}</b>
|
<b @click="logout">注销</b>
</span>
<span v-else>
<b>请登录</b>
</span>
</div>
<hr>
<div class="ctx">
<p>
<button @click="changeInfo('/phone/')">phone</button>
<button @click="changeInfo('/tv/')">tv</button>
</p>
<div v-for="info in infos" :key="info.url">
<img width="200" :src="info.url" alt="">
<p>{{ info.title }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
token: localStorage.token ? localStorage.token : '',
username: localStorage.username ? localStorage.username : '',
infos: [],
}
},
components: {},
beforeCreate() {
// 查看localStorage中是否存在token(是否登录)，未登录跳转登录页面
this.$options.methods._checkToken();
},
methods: {
logout() {
// 丢弃登录状态，就可以完成注销（不需要后台参与）
localStorage.clear();
this.token = '';
this.username = '';
},
_checkToken() {
let token = localStorage.token;
if (!token) {
this.$router.push('/login')
}
},
changeInfo(path) {
this.$axios({
url: `http://127.0.0.1:8001${path}`,
method: 'get',
headers: {
authorization: this.token
}
}).then(response => {
console.log(response.data);
this.infos = response.data.results;
})
}
},
watch: {
token() {
this._checkToken();
}
},
created() {
this.$axios({
url: 'http://127.0.0.1:8001/phone/',
method: 'get',
headers: {
authorization: this.token
}
}).then(response => {
console.log(response.data);
this.infos = response.data.results;
})
}
}
</script>
<style scoped>
h1 {
float: left;
}
span {
float: right;
}
.header:after {
content: '';
display: block;
clear: both;
}
.header {
line-height: 80px;
}
</style>
router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Login from '../views/Login.vue' Vue.use(VueRouter); const routes = [ { path: '/', name: 'home', component: Home }, { path: '/home', redirect: '/' //路由重定向 }, { path: '/login', name: 'login', component: Login }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router
main.js
cnpm install jquery
cnpm install bootstrap@3
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false; import axios from 'axios' Vue.prototype.$axios = axios; // 配置bootstrap环境 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' new Vue({ router, store, render: h => h(App) }).$mount('#app');
vue.config.js
const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", Popper: ["popper.js", "default"] }) ] } };
dg_proj 后端
主路由 urls.py
from django.conf.urls import url from django.contrib import admin from django.views.static import serve from django.conf import settings from app import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^login/$', views.login), url(r'^tv/$', views.tv), url(r'^phone/$', views.phone), url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}), ]
app.views.py
from django.shortcuts import render from django.http import JsonResponse # Create your views here. def login(request): username = request.GET.get('username') password = request.GET.get('password') # 规定账号 abc 密码 123 print(username,password) if username == "abc" and password == "123": return JsonResponse({ 'status': 0, 'msg': '登录成功', 'token': 'token.abc.123', 'username': username, }) return JsonResponse({ 'status': 1, 'msg': '登录失败', }) def tv(request): token = request.META.get('HTTP_AUTHORIZATION') if not token: return JsonResponse({ 'status': 1, 'msg': '没有权限', },json_dumps_params={'ensure_ascii': False}) return JsonResponse({ 'status': 0, 'msg': 'ok', 'results': [ { 'url': 'http://127.0.0.1:8001/media/img/003.jpg', 'title': '电视一号' }, { 'url': 'http://127.0.0.1:8001/media/img/004.jpg', 'title': '电视二号' } ] },json_dumps_params={'ensure_ascii': False}) def phone(request): token = request.META.get('HTTP_AUTHORIZATION') if not token: return JsonResponse({ 'status': 1, 'msg': '没有权限' }, json_dumps_params={'ensure_ascii': False}) return JsonResponse({ 'status': 0, 'msg': 'ok', 'results': [ { 'url': 'http://127.0.0.1:8001/media/img/001.jpg', 'title': '手机一号' }, { 'url': 'http://127.0.0.1:8001/media/img/002.jpg', 'title': '手机二号' } ] }, json_dumps_params={'ensure_ascii': False})
dg_proj/settings.py
INSTALLED_APPS = [ 'corsheaders' ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ] CORS_ORIGIN_ALLOW_ALL = True LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_I18N = True USE_L10N = True USE_TZ = False MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
app/apps.py
from django.apps import AppConfig class AppConfig(AppConfig): name = 'app'
dayehui
浙公网安备 33010602011771号