记一次快应用小开发

 

话说这天是一个清风徐来，微光粼粼的一个早晨，扭转不定的身体摆脱了温柔的它——my love bed。不扯皮了各位看官往下看。

 

效果展示如下，logo从网上找的如有侵权请联系我删除

技术方面需要javascript的基础，快应用一些知识，认证是用python的flask做的简单验证

下载快应用，新建个项目，如何安装和搭建可以看快应用官方文档

这个是之后实在看不下去的把ui修改过后的样子

<!--此处引用quist的ui 所以需要安装quist ui 命令 cnpm install quist-ui -->
<import name='quist-button' src='../../node_modules/quist-ui/components/quist-button/index'></import>
<import name="quist-loading" src="../../node_modules/quist-ui/components/quist-loading/index"></import>

<template>
    <div class='header'>
        <div>
            <quist-loading visible="{{visible}}" tip="{{tip}}" background="rgba(0, 0, 0, 0.6)"></quist-loading>
            <image src="../common/logo.png"></image>
        </div>
        <div class="info">
        <text style="color: #ff5c81;">{{error}}</text>
        <input type="text" placeholder="请输入账户" value="{{username}}" onchange="updataValue"></input>
        <input type="password" placeholder="请输入密码" value="{{password}}" onchange="updataPwd"></input>
        </div>
        <div>
            <quist-button :width="228" :border-radius="123" :border-color="#8bd5cb" type="default" value={{text}} onclick='login'></quist-button>
        </div>
    </div>
</template>

<script>
/* eslint-disable indent */
/*导入网络接口路由接口必须在manifest.json里面也要导入*/
import fetch from '@system.fetch'
import router from '@system.router';
/* eslint-disable l    ebreak-styl    */
export default {
    private: {
        visible:false,
        text: '登录',
        tip: '正在加载中',
        info:'',
        username: '',
        password: '',
        error:'',
    },
  login(){
        this.visible = true
    router.push ({
      uri: '/audio'
    })
    fetch.fetch({
      url: 'http://填上你的电脑ip（nginx也要开）/api/Info',
      responseType: 'json',
      method: 'Post',
      data:{ username:this.username,
        password:this.password
      }
    }).then(res => {
        this.visible = false
      console.log('null',res)
      const result = res.data
      this.info = result.data
      console.log(this.info)
      if(this.info.success){
        router.push ({
          uri: '/Music'
        })
      }else {
        this.error = '登录失败'
      }
    }).catch(error => {
        this.visible = true
      console.log('错误',error)
      this.error = '认证失败'
    })
  },
    updataValue(el){
      this.username = el.text
    },
    updataPwd(el){
      this.password = el.text
    },
    show() {
        router.push({ uri: '/DemoDetail' })
    },
    onHide() {
        this.error = ''
    },
    onInit() {
        this.$page.setTitleBar({ text: '登录',
        })
        // this.$page.setStatusBar({ backgroundOpacity: 1,
        //     backgroundColor: '#edfffa',
        // })
    },
}
</script>

<style>
.header {
  flex-direction: column;
  background-color: #edfffa;
}
.header > div {
  height: 50%;
  justify-content: center;
  align-items: center;
}
.header > div > image {
  height: 200px;
}
.header > div > text {
  color: #212326;
}
.info{
    flex-direction: column;
}
.info>input{
    color: #212326;
    margin-top: 50px;
}
</style>

后端处理数据用的python的flask框架，因为只是做的demo业务逻辑和入口写在一起了。

from flask import Flask, jsonify

from flask import abort

from flask import make_response

from flask import request

from flask_cors import cross_origin

app = Flask(__name__)


@app.route('/api/Music', methods=['POST'])
@cross_origin()
def get_music():
    print(request.form['name'])
    import music
    if len(request.form['name']):
        response = music.run(request.form['name'])
        return jsonify({'success': True, 'Info': response})
    else:
        return jsonify({'success': False})


@app.route('/api/Info', methods=['POST'])
@cross_origin()
def get_tasks():
    if request.form['username'] == 'admin' and request.form['password'] == 'admin':
        return jsonify({'success': True})
    else:
        return jsonify({'success': False})

if __name__ == '__main__':
    app.run()

本来是要做听歌的，但结束了我的实习工作从上海回到西安，一直荒废着，难受了。有没有能在西安推荐份工作的大佬啊，现在在家打酱油，投简历都石沉大海了，唉?！

下面是之前做的半成品，后台接口写好了，前端调样式布局发现快应用有很大样式布局限制，心里苦啊，没有现成好看的ui去用。