【Vue路由系统详述】
"一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter.
VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
@
VueRouter实现原理：
根据锚点值的改变，修改组件内容.
我们先来看看不使用VueRouter，自己实现路由的控制，如下代码：
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
window.onhashchange = function () {
// vue-router的实现原理是根据锚值的改变来对页面进行切换
switch (location.hash) {
case '#/login':
oDiv.innerHTML=`<h1>我是登陆页面</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>我是注册页面</h1>`;
break;
// 输入其他路径将显示为首页
default:
oDiv.innerHTML = `<h1>我是首页</h1>`;
break;
}
};
console.log(location.hash);
</script>
</body>
测试效果如下图：
可以看到，通过改变锚点值，页面跳转到我们需要的内容.
再来看看VueRouter实现路由的控制：
<body>
<div id="app"></div>
<script>
// 第一步：在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 第四部：监听a标签的锚点值的改变
// 下面的router-link会渲染成a标签，to为标签的href属性，to后面是router中定义的路径
// 下面的router-view是页面内容的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 第二步：实例化一个router对象(本质上是将路径和页面绑定了对应关系)
let router = new VueRouter({
routes: [
// 注意：routes，不是routers
{
path: '/',
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 第三步：在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
路由命名
方式一：
通过在vue-router对象中增加name属性来指定路由名称.
调用方式：v-bind:to={ name: "路由名称" }
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定定义的路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
template: `
<div>
<router-link v-bind:to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'register' }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 注意：routes, 不是routers
routes: [
{
// 路由命名
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
方式二：
<body>
<div id="app"></div>
<script>
Vue.use(VueRouter);
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-view name="header"></router-view>
<router-view name="footer"></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
path: '/',
components: {
header: {
template: `
<div>头部</div>
`,
},
footer: {
template: `
<div>底部</div>
`,
},
},
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
router: router,
components: {
App,
},
});
</script>
</body>
路由参数
<body>
<div id="app"></div>
<script>
/*
在真实的场景中，有以下两种路径形式：
1. xx.html/users/1
2. xx.html/users?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面的params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/users/1
name: 'userParams',
path: '/users/:userId',
component: userParams,
},
{
// 2. xx.html/users?userId=1
name: 'userQuery',
path: '/users',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
路由参数的实现原理
<body>
<div id="app"></div>
<script>
/*
在真实的场景中，有以下两种路径形式：
1. xx.html/user/1
2. xx.html/user/?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.params.userId);
// 此时可以发送ajax请求到后端获取数据
},
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.query.userId);
// 此时可以发送ajax请求到后端获取数据
}
};
let App = {
// 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/user/1
name: 'userParams',
path: '/user/:userId',
component: userParams,
},
{
// 2. xx.html/user/?userId=1
name: 'userQuery',
path: '/user',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
子路由
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01">子页面01</router-link>
<router-link to="childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/courses',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
可见，使用此方法，子页面不能正常显示.
子路由之append
append参数会在路径后面追加子路由的路径，注意：会在后面一直追加.
append参数只适用于只需一层子路由的情况.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 添加append参数
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01" append>子页面01</router-link>
<router-link to="childpages02" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
这里只点击了一次 子页面01，显示的内容是正常的，后面的路径也是正常的.
下面的是点击了两次：
可见，内容显示不正常了，后面的路径也不正常了——append参数会在后面一直添加子路由中的路径.
使用以上方式，路径是写死在属性中的，所以子路径会不断的append到最后面，导致后续访问不到响应的页面，可以采用另一种方式——动态绑定属性.
动态绑定属性
动态绑定属性即给子路由命名，使用子路由命的名称来实现子路径的正常切换.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 使用子路由命的名称来实现子路径的正常切换
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }">子页面01</router-link>
<router-link :to="{ name: 'childpages02' }">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
注意：此方法必须使用name查找组件和路径的对应关系，而不能使用path.
子路由之append升级版
所谓的append升级版其实就是同时使用动态绑定属性和append.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// append升级版：<router-link :to="{ name: 'childpages01' }" append>...</router-link>
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }" append>子页面01</router-link>
<router-link :to="{ name: 'childpages02' }" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
子路由之非append
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="/test/childpages01">子页面01</router-link>
<router-link to="/test/childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 子路由之非append(写全路径)
path: '/test/childpages01',
component: ChildPages01,
},
{
// 子路由之非append(写全路径)
path: '/test/childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
路由重定向
<body>
<div id="app"></div>
<script>
// // 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 使用redirect实现路由重定向
// 把a标签的锚点值和页面内容绑定了对应关系
redirect: '/login',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
如上代码，我们点击支付链接时，将会跳转至登陆页面.
手动路由
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
</div>
`,
};
let App = {
// 使用v-on(简写为@)给按钮绑定一个事件
template: `
<div>
<router-link to="/">首页</router-link>
<button @click="myClick">点击跳转至测试页面</button>
<router-view></router-view>
</div>
`,
// 定义一个用于跳转至测试页面的的事件
methods: {
myClick: function () {
this.$router.push('/test');
}
},
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
path: '/',
component: Home,
},
{
path: '/test',
component: Test,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
如上代码，点击按钮即可跳转至测试页面.
路由钩子
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 这一步骤将调用路由钩子函数(通过布尔值来判断是否调用该钩子函数)
meta: {required_login: true},
component: Pay,
},
],
});
// 定义一个路由钩子函数
// 通过router对象的beforeEach(function (to, form, next) {})
router.beforeEach(function (to, from, next) {
// to:从哪来
// from:到哪去
// next:下一步做什么
console.log('to:', to);
console.log('from:', from);
console.log('next:', next);
if (to.meta.required_login) {
next('/login');
} else {
next(); // 正常跳转
}
// router.afterEach(function (to, from) { ··· });
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
如上代码，通过路由钩子函数实现了点击支付链接时跳转至登陆页面的功能.
在路径中去掉"#"号
在实例化的router对象中增加一个属性：mode: 'history'，该属性可将路径中显示的"#"号去掉.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 使用mode: 'history'实现取去掉路径中显示的"#"号
mode: 'history',
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
"
【Vue路由系统详述】的更多相关文章
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- Vue路由系统
Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...
- Vue专题-路由系统
一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如果实现路由控制,即Vue路由系统. Vue路由系统 VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变, ...
- Vue.js之路由系统
Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...
- vue学习之六路由系统
一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...
- 简简单单的Vue3（插件开发，路由系统，状态管理）
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...
- 04Vue.js路由系统
Vue.js路由系统: https://pizzali.github.io/2018/10/28/Vue.js%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F/
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
随机推荐
- 关于 RMAN 控制文件自动备份路径中指定的 %F 说明
默认情况下,RMAN备份的属性配置一共 14 行( show all; )来自博客园AskScuti CONFIGURE CONTROLFILE AUTOBACKUP FORMAT FOR DEVIC ...
- Python标准库之shelve模块(序列化与反序列化)
shelve模块是一个简单的key,value将内存数据通过文件持久化的模块,可以持久化任何picklel可支持的Python数据格式. 序列化 序列化源代码: import shelve impor ...
- Xlrd模块读取Excel文件数据
Xlrd模块使用 excel文件样例:
- arm-linux下qt + opencv开发环境的搭建（Altera DE1 Soc）
arm-linux-gnueabihf-gcc下载 qt下载 arm-linux下qt + opencv开发环境的搭建(Altera DE1 Soc) Ubuntu 16.04 安装QT arm嵌入式 ...
- Linux忘记 root密码的解决办法
很多朋友经常会忘记Linux系统的root密码,linux系统忘记root密码的情况该怎么办呢?重新安装系统吗?当然不用!进入单用户模式更改一下root密码即可. 步骤如下: 重启linux系统 重启 ...
- php中普通类 接口类 抽象类 浅谈
一.普通类 1.关键词:class 类名,继承关键字extends 2.继承:只能实现单继承, 3.多态:子类继承可以实现多种功能 4.封装:类有权限机制,私有的只能自己用,受保护的可以被继承,子类 ...
- [codeigniter4]Upgrading from 3.x to 4.x
CodeIgniter 4 is a rewrite of the framework, and is not backwards compatible. It is more appropriate ...
- Centos7 入门几个操作
http://www.wallcopper.com/linux/1650.html 创建文件软连接 ln -s 源路径 目标路径 查看软连接ls -il 服务操作:systemctl start fo ...
- 2017-12-08 违法数据筛选.sql
SELECT R. ID, R.LKBH, R.CDBH, R.FXBH, R.ZJBH, R.SBBH, R.CPHM, R.CPYSBH, R.CPYS, R.CSYSBH, R.CSYS, R. ...
- vue引用fastClick后，ios输入框聚焦不灵敏问题
fastClick.prototype.focus = function (targetElement) { targetElement.focus() }