路飞之前端知识
目录
路飞之前端知识
路飞前台全局CSS，全局配置文件
1. 整理项目
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
router/index.js
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
HomeView.vue
<template>
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
其它页面组件和小组件都删除
2. 全局CSS
正常的前端项目，需要去掉所有的标签默认样式，CSS
# 第一步：新建一个assets-css----global.css
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
margin: 0;
padding: 0;
font-size: 15px;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
table {
border-collapse: collapse; /* 合并边框 */
}
# 第二步：全局生效 main.js中配置
// 使用全局css样式，只需要导入就会生效
import '@/assets/css/global.css'
3.全局JS
js是向后端发送请求，请求地址测试阶段 127.0.0.1:8000,项目后期要上线，地址是要变化的，如果在组件中把地址写死，后期要改等于每个接口都要改，对开发来说是很繁琐的，如何解决这个问题呢？
引入了全局js，js中有个url地址，以后所有组件中发送请求时，都是用这个url地址:this.$settings.BASE_URL
配全局js步骤：
// 第一步：新建assets-js----settings.js
export default {
BASE_URL:'http://127.0.0.1:8000/api/v1'
}
// 第二步：在main.js中引入
// 引入settings.js,把settings对象放入到vue的原型中
import settings from "@/assets/js/settings";
Vue.prototype.$settings = settings
// 以后在任意组件中只需要 this.$settings.BASE_URL
// 第三步：在任意组件中使用
this.$settings.BASE_URL
this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
})
安装axios
# 跟后端交互
# 使用步骤：
第一步：安装 cnpm install axios -S
第二步：把axios放到vue原型中,main.js中
import axios from "axios";
Vue.prototype.$axios=axios #把axios对象放入到vue的原型中
第三步：在任意组件中使用
this.$ajax.get()
安装vue-cookies
# 后期登录成功，token存在cookie中
# 使用步骤
第一步：安装 cnpm install vue-cookies -S
第二步：把vue-cookies放到vue原型中,main.js中
import cookies from "vue-cookies";
Vue.prototype.$cookies=cookies
第三步：在任意组件中使用
this.$cookies.set()
this.$cookies.set()
安装elementui
# 样式，使用elementui
# 使用步骤：
第一步：安装 cnpm install element-ui -S
第二步：main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
第三步：复制，粘贴
安装bootstrap和jq
# 咱们项目，没有使用bootstrap，但是有同学想知道怎么引入
# bootstrap引入必须引入jquery
# 使用步骤：
第一步：安装
cnpm install jquery -S
cnpm install bootstrap@3 -S
第二步：配置全局使用bootstrap，main.js中加入
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
第三步:配置jquery：vue.config.js,完全复制粘贴过去
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
第三步：在页面中使用bootstrap
导出项目依赖
mac系统装不了mysqlclient，本地先使用pymysql，上线 再使用 mysqlclient，由于本地开发环境的依赖和上线依赖不一样。如何解决？
# 由于每个项目中都会有个requirements.txt 文件，指明了所有依赖和版本
pip freeze # 显示当前环境装的所有依赖
pip freeze > requirements.txt # 将当前环境所有的依赖装进入requirements.txt
# 新环境，安装依赖
pip install -r dev.txt # 开发环境
pip install -r requirements.txt # 上线环境
-
使用pymysql,是会报错的，django3以上解决了这个问题
# settings import pymysql pumysql.install_as_MySQLdb()
前台主页功能
主要分为首页页面组件、头部组件、轮播图组件和尾部组件。由于头部我们在所有页面都能用到，抽取出来单独做组件，方便使用组件。
前端项目----luffy-city
1.Header组件
点击查看代码
<template>
<div class="header">
<div class="slogan">
<p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
</div>
<div class="nav">
<ul class="left-part">
<li class="logo">
<router-link to="/">
<img src="../assets/img/head-logo.svg" alt="">
</router-link>
</li>
<li class="ele">
<span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
</li>
<li class="ele">
<span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
</li>
<li class="ele">
<span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
</li>
</ul>
<div class="right-part">
<div>
<span>登录</span>
<span class="line">|</span>
<span>注册</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {
// 当前所在路径，去sessionStorage取的，如果取不到，就是 /
url_path: sessionStorage.url_path || '/',
}
},
methods: {
goPage(url_path) {
// 已经是当前路由就没有必要重新跳转
if (this.url_path !== url_path) {
this.$router.push(url_path);
}
sessionStorage.url_path = url_path;
},
},
created() {
// 组件加载万成，就取出当前的路径，存到sessionStorage this.$route.path
sessionStorage.url_path = this.$route.path;
// 把url_path = 当前路径
this.url_path = this.$route.path;
}
}
</script>
<style scoped>
.header {
background-color: white;
box-shadow: 0 0 5px 0 #aaa;
}
.header:after {
content: "";
display: block;
clear: both;
}
.slogan {
background-color: #eee;
height: 40px;
}
.slogan p {
width: 1200px;
margin: 0 auto;
color: #aaa;
font-size: 13px;
line-height: 40px;
}
.nav {
background-color: white;
user-select: none;
width: 1200px;
margin: 0 auto;
}
.nav ul {
padding: 15px 0;
float: left;
}
.nav ul:after {
clear: both;
content: '';
display: block;
}
.nav ul li {
float: left;
}
.logo {
margin-right: 20px;
}
.ele {
margin: 0 20px;
}
.ele span {
display: block;
font: 15px/36px '微软雅黑';
border-bottom: 2px solid transparent;
cursor: pointer;
}
.ele span:hover {
border-bottom-color: orange;
}
.ele span.active {
color: orange;
border-bottom-color: orange;
}
.right-part {
float: right;
}
.right-part .line {
margin: 0 10px;
}
.right-part span {
line-height: 68px;
cursor: pointer;
}
</style>
2. Banner组件
:interval="3000"可以定时3s切换图片
created() {
this.$axios.get(this.$settings.BASE_URL+ '/home/banner/',{
'token':'shiso ssohi '
}).then(res=>{
console.log(res.data.data)
if (res.data.code===100){
this.banners = res.data.data
}else{
this.$message(res.data.msg)
}
}).catch(res=>{
this.$message('轮播图服务异常，请稍微再试')
})
},
判断点击图片跳转试外网还是内网，并赋予图片的唯一值
点击查看代码
<template>
<div class="block">
<!-- <span class="demonstration">Click 指示器触发</span>-->
<!-- arrow属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标
hover 到走马灯上时才会显示；若将arrow设置为always，则会一直显示；设置为never，则会一直隐藏。-->
<el-carousel trigger="click" height="350px" :interval="3000" arrow="">
<el-carousel-item v-for="banner in banners" >
<!-- 判断内网还是外网-->
<div v-if=" banner.link.indexOf('http')>-1">
<a :href="banner.link">
<img :src="banner.image" :alt="banner.title" width="1400px" height="350px">
</a>
</div>
<div v-else="">
<router-link :to="banner.link">
<img :src="banner.image" :alt="banner.title" width="1400px" height="350px">
</router-link>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "Banner",
data(){
return {
banners: [],
}
},
created() {
this.$axios.get(this.$settings.BASE_URL+ '/home/banner/',{
'token':'shiso ssohi '
}).then(res=>{
console.log(res.data.data)
if (res.data.code===100){
this.banners = res.data.data
}else{
this.$message(res.data.msg)
}
}).catch(res=>{
this.$message('轮播图服务异常，请稍微再试')
})
},
}
</script>
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
3.Footer组件
点击查看代码
<template>
<div class="footer">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>商务合作</li>
<li>帮助中心</li>
<li>意见反馈</li>
<li>新手指南</li>
</ul>
<p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
</div>
</template>
<script>
export default {
name: "Footer"
}
</script>
<style scoped>
.footer {
width: 100%;
height: 128px;
background: #25292e;
color: #fff;
}
.footer ul {
margin: 0 auto 16px;
padding-top: 38px;
width: 810px;
}
.footer ul li {
float: left;
width: 112px;
margin: 0 10px;
text-align: center;
font-size: 14px;
}
.footer ul::after {
content: "";
display: block;
clear: both;
}
.footer p {
text-align: center;
font-size: 12px;
}
</style>
前台轮播图功能展示
浙公网安备 33010602011771号