1 Star 1 Fork 2

yesapicn / YesAdmin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

YesAdmin 开源小后台 v1.2

YesAdmin 小后台,基于iview-admin和小白接口,无须后端、免服务器,快速开发你的业务管理后台!

使用YesAdmin小后台,你可以:

  • 1、免费使用,并用于开发自己的项目,可用于商业用途,可提供给前台用户使用
  • 2、只需要掌握Vue前端开发,就可以快速开发自己的业务管理后台
  • 3、果创云为项目开发提供数据存储、API数据接口、总后台、托管运行

特点:

  • 【纯前端开发】本地开发调试:可以在本地使用iview-admin进行业务功能开发和调试
  • 【后端云低代码】果创云托管运行:构建打包后上传到果创云,即可访问使用

Github源代码:https://github.com/yesapicn/YesAdmin
在线体验:http://open.yesapi.cn/admin-api_demo/ (测试账号密码:dogstar / 123456)

使用教程

第一步,下载源代码

# 克隆项目
git clone git@github.com:yesapicn/YesAdmin.git

# 安装依赖
npm install

# 开发
npm run dev

如果需要使用国内的淘宝镜像,可以使用以下命令:

# 使用阿里定制的cnpm命令行工具代替默认的npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

# 检测是否安装成功
$ cnpm -v

# 安装依赖
cnpm install

# 开发
cnpm run dev

第二步,修改配置

使用前,可先在果创云免费注册你的账号,方便存放你自己的数据。注册激活成功后换成你的接口域名,app_key和密钥。

注册后,可进入果创云查看你的应用配置。链接:http://open.yesapi.cn/?r=App/Mine

小后台根目录配置

在本地,修改配置文件:./vue.config.js

const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/admin-api_demo/'  // 线上的托管环境的根目录,最终正式的访问链接是 http://open.yesapi.cn/admin-你的果创云登录账号/
  : '/' // 本地根目录

温馨提示:把上面的/admin-api_demo/换成/admin-你的果创云登录账号/

API接口配置

在本地,修改配置文件:./src/config/index.js;

  {
   /**
   * @description 小后台接用户的APP_KEY和密钥
   *              用于在请求中生成动态签名
   */
  OKAYAPI_APP_KEY: 'F9B**************************6A2', // TODO: 你的app_key
  OKAYAPI_APP_SECRECT: 'iFESz*********************************************************qW3nIPET', // TODO: 仅本地开发调试需要,构建时可置空
  }

  /**
   * @description api请求基础路径
   */
  baseUrl: {
    dev: 'http://api.yesapi.cn/yesapi/', // TODO:你的小白接口域名
    pro: '/yesapi/'// 正式域名,不需要修改
  },
  proxyTable: {
    '/api': {
      target: 'http://hn216.api.yesapi.cn/yesapi/',  // TODO:你的小白接口域名
      changeOrigin: true, // 开启代理
      pathRewrite: {
        '^/api': '/'
      }
    }
  },

分别修改:

  • OKAYAPI_APP_KEY 和 OKAYAPI_APP_SECRECT
  • baseUrl.dev
  • proxyTable.target

路由配置

在本地,修改路由配置文件:./src/ruoter/index.js

const baseUrl = process.env.NODE_ENV === 'production' ? '/admin-api_demo/' : '/' // 注意区分本地和线上的环境

温馨提示:把上面的/admin-api_demo/换成/admin-你的果创云登录账号/

第三步,本地运行

修改上面配置后,运行命令:

# 开发
npm run dev

# 或

# 开发
cnpm run dev

运行效果

登录页:

温馨提示:这里的登录账号是你的应用会员,不是果创云登录账号!推荐使用应用管理员账号登录。点击查看你的应用会员

添加文章:

提示:这是一个数据模型的例子,可根据需要修改,实现数据的后台管理,包括增删改查。

素材库:

上传图片:

提示:此部分对应素材库

登录统计:

注册统计:

功能列表

  • 登录 / 注册
    • 登录(使用应用云会员登录)
    • 注册(注册成为应用云会员)
  • 素材库
    • 素材管理(和果创云同步)
    • 上传文件、图片(和果创云同步)
  • 数据统计
    • 登录统计(每日登录统计)
    • 注册统计(每日登注册统计)
  • 文章管理(数据管理示例,需要先安装示例模式)
    • 文章列表管理
    • 添加文章
    • 查看文章
    • 上传CSV/Excel文件

在线免费安装文章的数据模型。你可以根据自己的需要自定义添加数据模型。

更多后台功能,可自行根据业务需要开发。

构建和发布

在本地运行:

# 构建 
npm run build

# 或
# 构建 
cnpm run build

构建后,把dist目录打包:

登录果创云平台,上传发布:

发布页面:http://open.yesapi.cn/?r=App/Admin

发布后,正式环境访问效果:

发布后,就可以给你的团队使用啦~!

开发文档

如何调用API接口?

当你需要请求其他小白接口时,首先在./src/api目录下进行接口的封装,例如参考统计接口:

import axios from '@/libs/api.request'

import validateUrl from './okayapi_config.js'// 添加请求合法性校验的查询参数

export const GetDailyRegister = (data = { start_date, end_date }) => {
  let url = validateUrl('App.Statistics.GetDailyRegister', data)
  return axios.request({
    method: 'post',
    url,
    data
  })
}

封装好API调用后,就可以在需要的地方进行调用,传递参数并获取结果,例如:

import { GetDailyRegister } from '@/api/stats'

...

  methods: {
    getQuery () {
      const formdata = new FormData()
      formdata.append('start_date', this.dateRange[0])
      formdata.append('end_date', this.dateRange[1])
      GetDailyRegister(formdata).then(res => {
        // 打印API结果
        console.log(res)
      })
    },

本项目用到的小白接口

技术栈

License

MIT

MIT License Copyright (c) 2017 TalkingData Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

YesAdmin 小后台,基于iview-admin和小白接口,前后端分离,本地开发,果创云托管,快速开发你的业务后台! 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/yesapicn/YesAdmin.git
git@gitee.com:yesapicn/YesAdmin.git
yesapicn
YesAdmin
YesAdmin
master

搜索帮助