Flower mall applet + background management data visualization analysis

1 Introduction

1. Register the WeChat Mini Program

If you do not have an account on the WeChat public platform, please enter the homepage of the WeChat public platform and click the "Register Now" button to register. The type of registered account can be a subscription account, service account, mini program, or corporate WeChat . We can choose "mini program".

Then fill in the account information. It should be noted that the email address filled in must be an email address that has not been registered on the WeChat public platform or bound by a personal WeChat account, and each email address can only apply for one Mini Program.

After activating the mailbox, select the subject type as "personal type", and register the subject information as required. After the subject information is submitted, it cannot be modified. The subject will become the only legal subject and contracting subject for you to use the services and functions of the WeChat Official Accounts Platform, and cannot be changed or modified when other business functions are subsequently opened.

insert image description here

2. WeChat developer tools

Download the WeChat web developer tool , and download the corresponding installation package according to your own operating system to install it.

1. Create a new project

2. Page introduction

insert image description here

3. Project composition

insert image description here

4. page.json file

insert image description here

pages registration page
window window information

5. Create a new page

  1. Right click on the pages folder to create a new folder
  2. Right click in the file to create a new page
  3. Which page is on the top, which page is displayed by default
  4. JSON requires strict syntax, no extra comments and commas

insert image description here
insert image description here

So the new page is built, let's see what's there

insert image description here

ceshi.wxml template file
ceshi.js business logic
ceshi.wxss style
ceshi.json page configuration

insert image description here
Adjust the newly created file path to the top and that is the home page, which means that the first path is the path of the home page!

Page configuration:

"enablePullDownRefresh": true,  允许下拉刷新
"backgroundTextStyle": "dark",  背景文字颜色
"backgroundColor":"#f70", 		背景颜色
"usingComponents":{}       		组件

Three, basic grammar

The template syntax of the applet is approximately equal to the template syntax of vue

1. Text rendering

{
   
   { msg}}可以执行简单的js表达式
{
   
   {2+3}}
{
   
   {msg.length}}

2. Conditional rendering

wx:if=""
wx:elif=""
wx:else

3. List rendering

wx:for="{
   
   {list}}"
wx:key="index"
	{
   
   {item}}
	{
   
   {index}}

4. Custom list rendering

定义item与index的名称
wx:for="{
   
   {list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{
   
   {myidx}}
{
   
   {myitem}}

5. Import

(uncommonly used)

import
can only import template content
template/utils.wxml
<template name="userCart"> username: { {name}} </template>
home.wxml
<import src="/template/utils.wxml">
<tempate is ="userCart" data="{ {...u1}}">

include
can only import non-template content
template/foot.wxml <view>{ {content}}</view>
home.wxml <include src="/template/foot.wxml">

The functions of this system mainly include:

  1. User registration, login,
  2. information maintenance,
  3. member search,
  4. personalized recommendation
  5. administrator for information management, etc.
  6. WeChat flower mall mini program
  7. Post a product
  8. commodity purchase
  9. Sales statistics
  10. Background + applet development
  11. Data excel export

3 Key technologies of the system

Use WeChat applet, springboot, vue, mysql, mybaties, typescript, html, css, js, etc. for development

4 Development Tools

Development tools mainly include: idea, jdk1.8, maven, mysql5.7, Navicat, WeChat developers, etc.

5 code display

@RequestMapping("/strategy")
@RestController
@Scope("prototype")
public class StrategyController {
    
    
    @Autowired
    private StrategyService strategyService;
    @Value("${web.upload-path}")
    private String path;

    @RequestMapping("/findPage")
    public ObjDat<Strategy> findPage(Strategy strategy, @RequestParam(value="page", defaultValue="1") int page, @RequestParam(value="limit", defaultValue="10") int limit){
    
    
        return strategyService.findPage(strategy,page-1,limit);
    }

    @RequestMapping("/edit")
    public JsonResult edit(HttpServletRequest request, Strategy strategy) throws IOException {
    
    
        User user=(User)request.getSession().getAttribute("user");
        if(user==null){
    
    
            return JsonResult.error("请登录");
        }
        String str=strategyService.edit(request,strategy);
        if(str.equals("成功")){
    
    
            return JsonResult.success("操作成功");
        }else{
    
    
            return JsonResult.error("操作失败");
        }
    }

6 System function description

Project function demo

insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here

Guess you like

Origin blog.csdn.net/qq_42135426/article/details/128582681