# ukiyo-web-code

**Repository Path**: dusw/ukiyo-web-code

## Basic Information

- **Project Name**: ukiyo-web-code
- **Description**: ukiyo-web网页的源代码
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-26
- **Last Updated**: 2023-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 原神小助手
> 功能：每日素材，树脂、家园相关、探索派遣和质变仪的提醒  
> 预想：保存玩家每日的树脂花费，最后生成图表数据

#### 一、项目构思
1. 利用Python和Xpath插件对米游社爬虫，获取角色、武器、天赋书、武器突破材料等的标题和图片素材。

> (1). 在浏览器上下载Xpath插件，打开对应网站，打开pyfiles/getUrl.py，根据注释运行爬取图片。
> 可选：pyfiles/grt-thpic.py可以批量裁剪、缩放调整图片。

2. 创建Excel表格处理图片信息，详见pyfiles/sheets.xlsx

> 根据数据库的思想，创建一些基本表，如：元素、星级、武器类型等，再创建主要的表，
> 如：角色、武器等，这里填表可以手填也可以利用Xpath爬虫填，由于我做了2个网站的资料，
> 角色还好办，获取到中文名，排序拼接即可，但武器的另一个网站，不太好爬取，
> 有大量的3星以下的武器混入其中，只能手写了。   

#### 二、项目创建
1. 下载安装node工具，通过以下指令确认环境变量，如果失败可能是安装错误或未配置

```shell
C:\Users\admoiff>node -v
v16.5.0
C:\Users\admoiff>npm -v
7.19.1
```

2. 利用vue-cli3（vue 脚手架3）创建项目，具体步骤见网上教程

```shell
vue create ukiyo-web
```

3. 使用node的npm工具安装 **`element-ui`** 、**`less`** 、**`vue-router`**依赖
4. 创建页面、路由、数据、素材、公共的请求、组件等文件夹
5. 运行、调试和打包

```shell
# 运行
npm run serve
# 打包
npm run build
```

#### 三、部署项目
1. 使用github或gitee平台部署项目，详见网上教程！  
  
2. 使用域名访问项目：**https://dusw.gitee.io/ukiyo-web**