Vue+Flask实现单页应用_0
今天用我们一起来试试，使用Vue+Flask搭建一个简单的单页应用。前端环境配置首先安装vue1npminstallvue创建一个vue项目1#使用webpack打包工具初始化一个名为frontend的项目2vueinitwebpackfrontend安装依赖1#进入项目目录2cdfrontend3#安装vue-router4npminstallvue-router--save-dev5#installelement-ui6npmielement-ui-S7#installSASSloader8npminstallsass-loadernode-sass--save-dev9#installdependencies10npminstallstartproject1npmrundevAt至此，一个最简单的vue应用就完成了。我们看一下src文件夹，这里是我们写前端代码的地方。以下文件的作用\assets：用于存放资源文件components：用于存放Vue功能组件views：用于存放Vue视图组件router：用于存放vue-router配置api：存放写好的api调用代码config：使用存放一些公共配置，比如后端url等utils：公共方法App.vue：组件模板main.js：项目入口文件下面简单实现一个登录功能，进一步了解各个文件的作用。先添加代码处理配置信息，在config文件夹下创建url.js文件1constdevUrl='http://127.0.0.1:9980';2//constproUrl='http://apiUrl.com';34exportdefault{5apiUrl:devUrl,6apiPrefix:'api',7gitHub:''8}在api文件夹中创建一个https.js文件1从'axios'导入axios2从'qs'导入qs3从'../config'导入配置;45axios.defaults.timeout=5000;6axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';7axios.defaults.baseURL='';89functionbuildApiUrl(url){10return`${Config.apiUrl}/${Config.apiPrefix}/${url}`;11}1213axios.interceptors.request.use((config)=>{14if(config.method=='post'){15config.data=qs.stringify(config.data);16}17returnconfig;18},(error)=>{19console.log('errorparams')20returnPromise.reject(error);21}22);2324axios.interceptors.response.use((res)=>{25if(!res.data.success){26returnPromise.resolve(res);27}28返回资源；29}，（错误）=>{30console.log('Networkerror')31returnPromise.reject(error);32}33);3435//返回一个Promise(发送post请求)36exportfunctionfetchPost(url,params){37letapiUrl=Buildapiurl(url);38RETURNNewPromise(Resolve,Reject)=>{39axios.post(Apiurl,Params)40.Thense(Response=>{41Response);拒绝（错误）；44})45.catch((error)=>{46reject(error)47})48})49}50////ReturnaPromise(sendgetrequest)51exportfParam){52LetApiurl=Buildapiurl（网址）；53返回新的Promise)57},ERR=>{58Reject(ERR)59})60.catch((error)=>{61Reject(error)62})64}6566exportdefault{67fetchGet,68fetchPost69}在这里封装了axios的post和get请求在views下创建主页视图Main.vue123Homepage4
5671213在views1234欢迎登录56789101112登录1314151621请输入帐号和密码2223OK2425262732账号或密码错误3334确定353637
3839409899100.login-button{101text-align:center;102}103.login-box{104边框：1pxsolid#DCDFE6;105宽度：350px;106边距：180px自动；107填充：35px35px15px35px；108边框半径：5px；109-webkit-边框半径：5px；110-moz-边框半径：5px；111框阴影：0025px9；#10929}113114.login-title{115text-align:center;116margin:0auto40pxauto;117color:#303133;118}119修改路由器下面的路数index.js1importVue'fromimportvue路由器从'vue-router'3从'@/components/HelloWorld'导入HelloWorld4从'@/views/Login'导入登录5从'@/views/Main'导入Main67Vue.use(Router)89exportdefaultnewRouter({10路线：[11{12路径：'/'，13个名称：'Helloworld'，14组件：helloworld15}，16{17//main页面18路径：'/main'，19个名称：'main'，20组件：main21}，22{23//登陆24路径：'/login'，25名称：'login'，26组件：login27}，28]29}）修改app.vue文件12345
6781314最后在配置入口文件main.js1//要使用`import`命令加载的Vue构建版本2//（仅运行时或独立）已在webpack.base.conf中设置为别名。3importVuefrom'vue'4importAppfrom'./App'5importrouterfrom'./router'6importVueRouterfrom'vue-router'78//导入元素tUI9importElementUIfrom'element-ui'10import'element-ui/lib/theme-chalk/index.css'1112//importaxios13importaxiosfrom'axios'14importQSfrom'qs'1516Vue.prototype.$axios=axios17Vue.prototype.qs=QS1819Vue.config.productionTip=false2021Vue.use(VueRouter)22Vue.use(ElementUI)232425/*eslint-disableno-new*/26newVue({27el:'#app',28router,29//components:{App},30//template:'
'31render:h=>h(App)3233})现在我们启动我们的前端程序1npmrundevifyouseesimilar1你的应用正在运行这里：http://localhost:8080说明我们的前端代码构建成功现在我们在浏览器中打开上面的地址，可以得到如下页面：Back-end后端代码，我准备使用flask+flask_restful来构建1classLoginView(Resource):2defpost(self):3尝试：4username=request.get_json()['username']5pwd=request.get_json()['password']6user=User.query.filter_by(username=username).first()7如果用户是notNonewordanduser.verify_pass(PWD):8LOGIN_USER(User)9Return{'Code':200,'Message':'YouAreLoginNow!'}10Else:11Return{'Code':403,'MESSAGE':'WrongAccountorpassword'}12except:13raise141516api_login.add_resource(LoginView,'/login')这里只给出核心api代码，非常简单。更多关于flask_restful的信息，可以查看其官网。至此，一个简单的前后端分离的单页应用就完成了。阅读本文后，您可以按照步骤自行实现。新人在阅读过程中可能会对某些地方产生疑惑。其实我也研究了很久，也有很多疑惑。不过，我还是建议不要要求每一点都清楚。先了解重点，尝试实现。当你回顾相关资料时，你会更加感动。以上就是本次分享的全部内容。觉得文章还不错的话，请关注公众号：Python编程学习圈，每日干货分享，发送“J”还能收到海量学习资料，涵盖Python电子书和教程，数据库编程、Django、爬虫、云计算等。或者去编程学习网了解更多编程技术知识。
